Установка поля ввода текста HTML "по умолчанию". Отмените значение при нажатии ESC

Когда веб-форма записывается в браузер, браузеры запоминают начальные значения текстового поля INPUT. то есть. когда он получает HTML следующим образом:

<input type="text" value="something">

Браузер запоминает "что-то" как начальное/значение по умолчанию. Когда пользователь начинает набирать текст, он нажимает ESC, браузер возвращает поле к исходному значению (или пустое, если оно было первоначально пустым, конечно).

Однако при создании текстового поля ввода программно нажатие ESC всегда кажется пустым, даже если я создам его со значением по умолчанию, например:

$('<input type="text" value="something">')

Браузер не считает это значением по умолчанию и не возвращается к нему при нажатии ESC. Поэтому мой вопрос: существует ли способ создать текстовое поле в коде и каким-то образом присвоить ему значение по умолчанию, поэтому клавиша ESC работает так, как если бы браузер получил его в документе HTML?

Ответ 1

Это поведение esc - это только IE. Вместо использования jQuery используйте старый добрый javascript для создания элемента и он работает.

var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);

http://jsfiddle.net/gGrf9/

Если вы хотите расширить эту функциональность до других браузеров, я бы использовал объект данных jQuery для хранения значения по умолчанию. Затем установите его, когда пользователь нажимает кнопку escape.

//store default value for all elements on page. set new default on blur
$('input').each( function() {
    $(this).data('default', $(this).val());
    $(this).blur( function() { $(this).data('default', $(this).val()); });
});

$('input').keyup( function(e) {
    if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});

Ответ 2

Вы можете искать атрибут placeholder, который будет отображать серый текст в поле ввода, когда он пуст.

От Сеть разработчиков Mozilla:

Подсказка пользователю о том, что можно ввести в элемент управления. текст заполнителя не должен содержать возврат каретки или линейные каналы. Эта атрибут применяется, когда значением атрибута type является текст, поиск, tel, url или электронная почта; в противном случае он игнорируется.

Однако, поскольку это довольно "новый" тег (из спецификации HTML5 afaik), вы можете захотеть проверить браузер, чтобы убедиться, что ваша целевая аудитория в порядке с этим решением.
(Если не сказать, скажите им обновить браузер, потому что этот тег работает как шарм, o))

И, наконец, мини-скрипка, чтобы увидеть это прямо в действии: http://jsfiddle.net/LnU9t/

Изменить: Вот простое решение jQuery, которое также очистит поле ввода, если обнаружено escape-нажатие клавиши: http://jsfiddle.net/3GLwE/

Ответ 3

Если вопрос: "Можно ли добавить значение на ESC", то ответ будет да. Вы можете сделать что-то подобное. Например, с использованием jQuery это будет выглядеть ниже.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<input type="text" value="default!" id="myInput" />

JavaScript

$(document).ready(function (){
    $('#myInput').keyup(function(event) {
        // 27 is key code of ESC
        if (event.keyCode == 27) {
            $('#myInput').val('default!');
            // Loose focus on input field
            $('#myInput').blur();
        }
    });
});

Рабочий источник можно найти здесь: http://jsfiddle.net/S3N5H/1/

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

Ответ 4

См. свойство defaultValue текстового ввода, которое также используется при reset форме, нажав кнопку <input type="reset"/> (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp)

btw, defaultValue и текст заполнителя - это разные понятия, вам нужно посмотреть, какой из них лучше подходит вашим потребностям.