Текстовое поле с заполнителем / подсказкой И фокусом - возможно? - PullRequest
Новая
       20

Текстовое поле с заполнителем / подсказкой И фокусом - возможно?

1 голос
/ 26 октября 2011

У нас есть опрос, где на некоторых страницах есть один вопрос textarea. Поскольку это единственный вход, мы хотим, чтобы он фокусировался на загрузке этого блока. Но мы также хотим иметь текст в стиле заполнителя в той же текстовой области.

Существует довольно много решений для того, чтобы обе функции работали во всех браузерах, например от Ajaxblender . Но я хочу, чтобы подсказка оставалась после фокуса, а затем исчезала при вводе текста . Есть идеи?

Примечание. Я понимаю, что в спецификациях HTML указано, что элемент-заполнитель должен исчезать. Так что, возможно, я должен сказать, что я хочу «водяной знак». Этот интерфейс предназначен для пожилых мужчин с низкой компьютерной грамотностью - им нужна любая помощь, которую мы можем им предоставить.

Должен работать с IE8: (

1 Ответ

4 голосов
/ 26 октября 2011

Если я понимаю вопрос, вы можете попробовать что-то вроде

HTML 

<textarea id="first">Instructions go here</textarea>

jQuery 

$('#first').focus().one('keydown', function(){
    $(this).val('');    
});

Пример: http://jsfiddle.net/jasongennaro/AYRyH/

Пояснение

  1. Пустое .focus() ставит фокус на поле при нагрузке.
  2. .one() запускает событие один раз для элемента
  3. При keydown мы удаляем текущее значение, которое является инструкциями, которые мы добавили в начале.

РЕДАКТИРОВАТЬ

Учитывая ваш комментарий

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

Вы можете сделать это ... захватить value и затем поместить его обратно в textarea на blur если там ничего нет. 

var a = $('#first').val();

$('#first').focus().one('keydown', function(){
    $(this).val('');    
});

$('#first').blur(function(){
    if($(this).val() == ''){
       $(this).val(a); 
    }
})

Пример 2: http://jsfiddle.net/jasongennaro/AYRyH/1/

...