Установка значения по умолчанию для поля ввода текста HTML.Восстановить значение при нажатии ESC - PullRequest
Новая
       16

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

23 голосов
/ 20 января 2012

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

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

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

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

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

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

Ответы [ 4 ]

40 голосов
/ 30 ноября 2012

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

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

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

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

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

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

8 голосов
/ 20 января 2012

Это 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')); }
});
4 голосов
/ 26 мая 2013

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

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

4 голосов
/ 20 января 2012

Если вопрос звучит так: «Можно ли повысить ценность 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/

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

...