Html input значение по умолчанию: Атрибут value — значение по умолчанию поля ввода

регулярные выражения — html input pattern валидное значение по умолчанию

Вопрос задан 1 год 8 месяцев назад

Изменён 1 год 8 месяцев назад

Просмотрен 106 раз

Есть ли какое-нибудь валидное значение по умолчанию у pattern ? Смоделируем ситуацию в которой у нас в ЛЮБОМ СЛУЧАЕ ЕСТЬ этот атрибут у input, но поле должно принимать любое значение кроме пустого. Со «*» работает, но валидатор ругается

<form>
  <input type="text" placeholder="type here.." required pattern="*">
  <input type="submit" value="send">
</form>

• html
• регулярные-выражения
• input

В регулярных выражениях, * это квантификатор «0 и более раз».
Квантификаторы не могут использоваться сами по себе, без токена.

Более правильные выражения:

• .* — любое количество любых символов
• .+ — как минимум один любой символ
• \S+ — как минимум один непробельный символ

Второй вариант подходит к задаче вопроса (любое значение кроме пустого), следовательно

<form>
  <input type="text" placeholder="type here.." required pattern=".+">
  <input type="submit" value="send">
</form>

---

^{// Пояснение ниже — для тех, у кого нет условия «атрибут pattern есть у input’ов в любом случае».}
А вообще, достаточно указать только атрибут required (не указывая атрибут pattern): будет тот же самый эффект, что и у шаблона .+:

<form>
  <input type="text" placeholder="type here.." required>
  <input type="submit" value="send">
</form>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Автоудаление текста в input

Если внимательно посмотреть на мой попап (на момент написания статьи он плавно появляется в верхнем правом углу), конечно, если ты не успел его еще закрыть, то увидишь, что при фокусе полей ввода почты и имени, надписи, написанные там, автоматически исчезают.

Тоже самое могу сказать и про форму поиска на моем сайте (находится в шапке) – по умолчанию там написано «Введите поисковую фразу…», и если ты сейчас попробуешь нажать на ней кнопкой мыши – надпись автоматически пропадет.

Все потому, что у меня настроено автозамена текста в input.

Input – это тот самый тег, который выводит поля ввода информации и кнопки в формах (кнопку еще можно задать при помощи тега button).

Так вот, значения по умолчанию можно установить при помощи атрибута value:

<input type="text" value="Значение по умолчанию">

Где атрибут type=»text» – задает тип input – в данном случае – это текстовое поле.

А атрибут value – значение по умолчанию.

Пример этого текстового поля вы можете наблюдать ниже:

Вроде бы все отлично, в поле появился нужный нам текст. Но проблема в том, что при фокусе (активации поля для ввода текста) – он не пропадет как у меня в форме поиска или попапе.

Таким образом, вашим посетителям – этот текст будет доставлять маленькое, но все же – неудобство.

А ведь иногда просто необходимо, что бы текст в полях выступал в качестве подсказок. И здесь, я хочу вам показать, как можно одним легким способом решить эту проблему.

И в этом нам поможет Javascript!

Нам всего то и надо, что добавить строчку кода:

<input type="text" value="Значение по умолчанию" onfocus="if (this.value == ' Значение по умолчанию') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}">

Ну а теперь немного расшифровки, что бы было понятно, как все это дело работает:
• onfocus – указываем, что скрипт будет работать при фокусе на поле.
• код ниже означает, что если значение value тега input равняется «Значение по умолчанию» – то ему присваивается пустое значение.

if (this.value == ' Значение по умолчанию') {this.value = '';}

А вот эта строка является проверяющей.

onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}

Т.е. когда пользователь сфокусировался – значение value становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.

Если же посетитель ввел там какую то информацию и переключился на другое поле для заполнения, то данные, внесенные им останутся там без изменений.

Вот пример полей на моем попапе. Если что — можно потыкать, или подписаться :

---

Вот так вот все просто!

Надеюсь, эта информация оказалась для тебя полезной или просто понравилась?

Если так — прошу поделиться с ней друзьями.

Просто нажми на одну или несколько кнопок ниже!

Как установить значение по умолчанию в текстовом поле в HTML с помощью JavaScript

Последнее обновление: 1 января 2023 г.

IN — JavaScript HTML

В этом уроке мы покажем вам, как установить значение по умолчанию в текстовом поле в html используя javascript, здесь мы собираемся показать вам два типа метода для установки значения по умолчанию в текстовом поле.

В первом типе мы используем атрибут входного тега для установки значения в текстовом поле, тогда как другой тип использует свойство defaultValue в javascript.

Оба являются простым и легким способом установить значение в текстовом поле.

Пошаговое руководство о том, как установить значение по умолчанию в текстовом поле в HTML с использованием JavaScript: —

Здесь мы определили два элемента тега ввода для отображения вставленного значения по умолчанию в текстовые поля на веб-странице.

В первом элементе тега ввода мы указали атрибут «значение», это поможет нам установить значение по умолчанию в поле ввода.

Затем в другом элементе входного тега мы указали атрибут id «inp» для использования этого элемента в блоке скрипта, где мы получили доступ к этому элементу с помощью метода «getElementById ()» и, используя свойство «defaultValue», мы устанавливаем значение по умолчанию в этом поле ввода.

 

<голова>


<тело>

<тип ввода="текст">
<скрипт>
document. getElementById("inp").defaultValue="Дхану";


 

1. Тег , который указывает веб-браузеру, в какой версии HTML-файла записан файл, и не имеет завершающего тега.
2. Тег используется для обозначения начала HTML-документа.
3. Как показано выше, тег содержит информацию о веб-странице, и здесь объявлены ссылки на внешние файлы. Тег