Установка значения входного значения для значения атрибута в JQuery

Question

У меня есть ряд блоков <input />, которые я хочу начать с значения «». Введите свое имя ... ».

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

Я думал, иметь что-то вроде этого:

<input id="name" _startValue="Enter your name..." /> 

Тогда что-то вроде этого:

$(document).ready($("input").val($(this).attr(_startValue))); 

Это первоначально следует установить value к _startValue, но он ничего не делает. Замена строки с:

$(document).ready($("input").val("hello")); 

делает работу, однако, так что проблема должна быть с $(this) или attr().

Прежде всего, как мне заставить это работать. Во-вторых, если я пытаюсь сделать это очень заторможенным способом, то что это хороший способ получить эту функциональность?

Answer 1

Там уже библиотеки для этого, и если вы уже используете jquery, вы должны использовать их.

https://github.com/mathiasbynens/jquery-placeholder

просто добавить атрибут «заполнитель» и invoque функции:

<input placeholder="my placeholder"> 
<script type="text/javascript"> 
    $("document").ready(function(){ 
     $("input").placeholder(); 
    }); 
</script> 

Обратите внимание, что вам нужно только добавить плагин, если вам нужна старая поддержка браузера (в IE особенно), в противном случае атрибута достаточно.

Кроме того, учтите, что если вы укажете это, вам будут допущены ошибки, например, представление значения по умолчанию для формы. Плагины jquery обычно состоят в том, чтобы сделать <span> или что-то еще и поместить его поверх ввода, когда вход пуст, и спрячьте его, когда вход не пуст.

Answer 2

Я считаю его лучше использовать заполнители как:

<input id="name" placeholder="Enter your name..." /> 

Answer 3

   // v---you're not passing a function 
$(document).ready($("input").val($(this).attr(_startValue))); 
      // `this` isn't magic-------^---- It doesn't just mean what you want 

Должно быть больше, как это:

$(document).ready(function() { 
    $("input").val(function() { 
     return $(this).attr("_startValue"); 
    }); 
}); 

Answer 4

Обычный способ имитировать заполнители, чтобы поместить текст-заполнитель в значении элемента, а затем проверить значение в центре внимания, как:

if (this.value == this.defaultValue) this.value = ''; 

, а затем на размытость:

if (this.value == '') this.value = this.defaultValue; 

Пожалуйста, не Использовать заполнители вместо меток или экранную справку (например, формат для дат). Если браузер не поддерживает атрибут placeholder, вероятно, лучше не эмулировать их, если использовать его для значения по умолчанию является проблемой.

В конце концов, заполнители «хорошо иметь», они не должны быть основополагающими для правильного использования формы.