JavaScript: Установка стандартного значения для поля ввода

Быстрый ответ

Чтобы установить значение по умолчанию для поля ввода, достаточно применить следующий код:

document.getElementById('myInput').value = 'Текст по умолчанию';

С помощью данного кода в поле ввода с id="myInput" будет автоматически вставлено значение "Текст по умолчанию" сразу же после загрузки страницы.

Продвинутые методы и альтернативные варианты установки значений по умолчанию

Существуют различные методы установки значений по умолчанию для полей ввода.

Выбор элементов посредством использования querySelector

document.querySelector('input[name="userName"]').value = 'Пользователь';

querySelector предоставляет гибкие возможности выбора элементов.

Подробнее об этом расскажет наш спикер на видео

setAttribute: Альтернативы метода

document.getElementById('userInput').setAttribute('value', 'Иван Иванов');

Еще один возможный подход – установить значение, рассматривая его как атрибут, используя метод setAttribute.

Обращение к полям формы

document.forms['userForm']['userName'].value = 'Иван Иванов';

При работе с формами целесообразно применять указанный выше метод, обращаясь к названиям формы и поля ввода.

Важно, чтобы избежать ошибок, вызванных неполной загрузкой DOM, лучшей практикой будет размещение тегов скрипта перед закрывающим тегом </body>.

Решение проблем и работа с нестандартными сценариями

Что делать, если скрипт исполняется раньше времени?

Если DOM еще не загружен, воспользуйтесь window.onload:

window.onload = function() { 
    document.getElementById('commentField').value = 'Оставьте комментарий'; 
};

Такой подход позволит установить значение после завершения загрузки страницы.

Особенности работы с чекбоксами и радиокнопками

Для чекбоксов и радиокнопок:

document.getElementById('agreeToTerms').checked = true; // Как будто пользователь уже прочитал условия :)

Для выпадающих списков:

document.getElementById('chooseOption').selectedIndex = 2; // Теперь третий пункт из списка выбран по умолчанию

А может быть, установка динамических значений?

Для установки значения динамическиим в обход здесь:

function setDynamicDefault(inputId, defaultValue) {
    var inputElement = document.getElementById(inputId);
    if (!inputElement.value) {
        inputElement.value = defaultValue; 
    }
}

setDynamicDefault('dynamicInput', 'Динамический текст...');

Значение музыкальной шкатулки, установленное по умолчанию

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

Настройте мелодию или значение, которое вы хотели бы услышать при открытии шкатулки.

Улучшение пользовательского опыта

Выбор между подсказкой и значением: Дилемма

value отображает фактическое содержимое поля, в то время как placeholder изображает подсказку, которая исчезает при фокусировке на элементе.

Очищение поля при начале ввода: Как предотвратить дублирование

Подумайте о возможности замены значения по умолчанию, когда пользователь начинает вводить текст:

var inputField = document.getElementById('commentField'); 
inputField.onfocus = function() {
    if (inputField.value == 'Ваш комментарий') {
        inputField.value = ''; // Оставим поле ввода пустым
    }
};
inputField.onblur = function() {
    if (inputField.value == '') {
        inputField.value = 'Ваш комментарий'; // Вернём текст по умолчанию
    }
};

Значение использования меток: Пусть живут доступность и вспомогательные технологии

Обеспечьте пользователям удобство использования программ чтения с экрана и улучшите доступность, добавляя метки к полям ввода:

<label for="commentField">Ваши мысли:</label> 
<input type="text" id="commentField" value="Ваш комментарий">

Полезные материалы

1. MDN Web Docs: HTML элемент Input (фрагмент формы)
2. W3Schools: Атрибут value у HTML элемента input
3. Стандарт HTML
4. Валидация форм при помощи JavaScript
5. Всё, что вам нужно знать о inputmode | CSS-Tricks
6. HTML5 Формы: Типы полей для ввода (Часть 1) – SitePoint