清除多個輸入的值？

Question

我下面有一個jQuery腳本，可清除焦點輸入的值，如果輸入為空，則將其放回模糊狀態。 效果很好，但這是問題所在：

假設我在同一頁面上有3個輸入字段。 我單擊第一個值為“名稱”的值， defaultValue變量變為“名稱”，並且該字段清除。 如果單擊，該值將返回到“名稱”。 現在，如果我在不刷新頁面的情況下單擊第二個字段，則清除就可以了，但是當我在外部單擊時，不是獲取值“ Initials”，而是獲取第一個字段的值。

那么，每次單擊字段時，如何獲取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);
    });
});

Answer 1

關於代碼為何按其工作方式的解釋有些復雜。 對於每個輸入字段，您都將為所有輸入上的“模糊”事件建立（並重新建立每個“焦點”事件！）處理程序。 這令人困惑且難以思考，因此我將其總結為“不要那樣做”。

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影響樣式。 （輸入必須從班級開始；或者我想您可以將班級放在重點上。）

Answer 2

我通常使用此代碼有效:)

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);
  }
});
});

Answer 3

我會反過來，先保存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);
    });
});

適用標准免責聲明，以上代碼未經測試。 （編輯：修復了多個模糊綁定）