Очистить значение на нескольких входах? - PullRequest
Новая
       5

Очистить значение на нескольких входах?

1 голос
/ 24 августа 2010

У меня есть скрипт jQuery ниже, который очищает значение ввода в фокусе и возвращает его на размытие, если ввод остается пустым.Это прекрасно работает, но вот проблема:

Допустим, у меня есть 3 поля ввода на одной странице.Я нажимаю на первый со значением «Имя», defaultValue переменная становится «Имя» и поле очищается.Если я нажму, значение вернется к «Имя».Теперь, если я щелкаю по второму полю, не обновляя страницу, он просто очищается, но когда я щелкаю снаружи, вместо получения значения «Инициалы», оно получает значение первого поля.можно заставить переменную defaultValue обновляться каждый раз, когда я нажимаю на поле? 

var adaugaInput = $('form#adauga input:text');

adaugaInput.focus(function() {
    var defaultValue = $(this).val();
    if($(this).attr("value") == defaultValue) $(this).attr("value", "");
    adaugaInput.blur(function() {
        if($(this).attr("value") == "") $(this).attr("value", defaultValue);
    });
});

Ответы [ 3 ]

4 голосов
/ 24 августа 2010

Объяснение того, почему ваш код работает так, как оно работает, довольно сложно.Для каждого поля ввода вы устанавливаете (и переустанавливаете на каждом событии "focus"!) Обработчики событий "blur" на всех входах.Это сбивает с толку и трудно думать, поэтому я просто подытожу это и скажу «не делай так». 

adaugaInput.focus(function() {
  var input = $(this);
  if (!input.data('default')) input.data('default', input.val());
  if (input.val() === input.data('default'))
    input.val('');
});

adaugaInput.blur(function() {
  var input = $(this);
  if (input.val() === '') input.val(input.data('default'));
});

Обратите внимание, что я использую «.val ()», чтобы получить /установить атрибут «значение» для полей ввода.Кроме того, обработчик «размытия» настроен вне обработчика «фокуса».Этот код использует механизм jQuery ".data ()" для сохранения значения по умолчанию для каждого элемента.Не проверено, но, вероятно, довольно близко.

При таком механизме иногда удобно изменить стиль ввода, чтобы (например) значение по умолчанию отображалось более светлым шрифтом.Чтобы сделать это, вы должны удалить и добавить класс в поле ввода и повлиять на стиль с помощью CSS.(Входные данные должны начинаться с класса; или я полагаю, вы могли бы применить класс в фокусе.)

0 голосов
/ 24 августа 2010

Я бы пошел другим путем, сначала сохранив defaultValue, а затем привязав фокус: 

var adaugaInput = $('form#adauga input:text');

adaugaInput.each(function(){
    var defaultValue = $(this).val();
        $(this).focus(function() {

        if($(this).attr("value") == defaultValue) $(this).attr("value", "");
    });
    $(this).blur(function() {
        if($(this).attr("value") == "") $(this).attr("value", defaultValue);
    });
});

Применяются стандартные заявления об отказе от ответственности, приведенный выше код не тестируется(редактировать: исправлено многократное связывание размытия)

0 голосов
/ 24 августа 2010

Я обычно использую этот код, который работает:)

http://www.eggchops.com/web-stuff/jquery/jquery-clear-focus-function/

вот код: 

$(document).ready(function(){

var clearMePrevious = ”;

// clear input on focus
$(’.clearMeFocus’).focus(function() {
  if($(this).val()==$(this).attr(’title’)) {
    clearMePrevious = $(this).val();
    $(this).val(”);
  }
});

// if field is empty afterward, add text again
$(’.clearMeFocus’).blur(function() {
  if($(this).val()==”) {
    $(this).val(clearMePrevious);
  }
});
});
...