Использование jQuery для установки значения заголовка поля ввода

Question

Я создаю текстовые поля ввода, которые будут устанавливать его атрибут title в качестве значения при загрузке страницы.Когда пользователь щелкает текстовое поле, его значение будет очищено, а когда текстовое поле теряет фокус, либо введенное пользователем значение останется, либо его место займет значение по умолчанию.

Проблема: Кажется, я не могу установить значение текстового поля при загрузке страницы.Хотя изменение значения фокуса и размытия работает хорошо.Что не так?

jQuery код

$(function() {
    ///////////////////
    // Register Form //
    ///////////////////
    $(".splash_register_short_input, .splash_register_long_input").value = $(this).attr('title');
    $(".splash_register_short_input, .splash_register_long_input").value = $(".splash_register_short_input, .splash_register_long_input").attr('title');

    $(".splash_register_short_input, .splash_register_long_input").focus(function() {
        if (this.value == $(this).attr('title')) {
            this.value = '';
        }
    });

    $(".splash_register_short_input, .splash_register_long_input").blur(function() {
        if (this.value == '') {
            this.value = $(this).attr('title');
        }
    });
});

HTML код

<div id="splash_register_form">
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" />
    <input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>

Answer 1

Вы пытаетесь установить несуществующее свойство (.value) для объекта jQuery.Вместо этого используйте $("[YourSelector]").val().

Измените это:

$(".splash_register_short_input, .splash_register_long_input").value = $(this).attr('title');
$(".splash_register_short_input, .splash_register_long_input").value = $(".splash_register_short_input, .splash_register_long_input").attr('title');

На это:

$(".splash_register_short_input, .splash_register_long_input").val($(this).attr('title'));
$(".splash_register_short_input, .splash_register_long_input").val($(".splash_register_short_input, .splash_register_long_input").attr('title'));

Answer 2

Что-то вроде этого должно работать:

$(document).ready(function(){ 
  $('input[type=text]').focus(function(){ 
    if($(this).val() == $(this).attr('title'))
    {
      $(this).val('');
    }
  });

  $('input[type=text]').blur(function(){
    if($(this).val() == '')
    {
      $(this).val($(this).attr('title'));
    } 
  });
}); 

Но вы также можете найти плагин jQuery относительно "заполнителя" .

Answer 3

Я думаю, что здесь нужно перечислить. Каждую функцию следует использовать для присвоения значения каждому текстовому полю, например

    $(".splash_register_short_input, .splash_register_long_input").each(function(){
     $(this).val($(this).attr('title'));
    });