Блог

Главная - Вопросы по программированию - Использование jQuery для установки заголовка поля ввода в значение

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

#javascript #jquery #html #css #forms

#javascript #jquery #HTML #css #формы

Вопрос:

Я создаю текстовые поля ввода, которые будут устанавливать атрибут 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>

Ответ №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'));

Комментарии:

1. Должен ли я также использовать $(this).val() или this.value , но не $(this).value и this.val() ?

2. @Nyxynyx, правильно. this относится к элементу HTML. $(this) ссылается на объект jQuery.

Ответ №2:

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

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

Ответ №3:

Что-то подобное должно сработать :

 $(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, касающегося «заполнителя».