使用jQuery清除焦點上的輸入並返回模糊

Question

這幾乎可行。但是，當離開字段「defaulttext」時出現而不是原始文本值。不確定如何最有效地回顯defaultText中的變量。

 
$(function() { 
    var defaultText = $(this).val(); 
    $('input[type=text]').focus(function() { 
     $(this).val(''); 
     }); 
    $('input[type=text]').blur(function() { 
     $(this).val('defaultText'); 
     echo 
     }); 
}); 

Answer 1

Simpl寫$(this).val(defaultText):沒有'別的東西它不會把它當作一個變量。

Answer 2

您沒有引用變量defaultText。你傳遞一個字符串，因爲它用引號包裹。

$(function() { 
    var defaultText = $('input[type=text]').val(); 
    $('input[type=text]').focus(function() { 
     $(this).val(''); 
     }); 
    $('input[type=text]').blur(function() { 
     $(this).val(defaultText); // fixed! 
     }); 
}); 

Answer 3

您需要刪除set方法（val）中defaultText變量周圍的''標記。

試一下的

​​

Answer 4

$(function() { 
    var input = $('input[type=text]'); 

    input.focus(function() { 
     $(this).val(''); 
    }).blur(function() { 
     var el = $(this); 

     /* use the elements title attribute to store the 
      default text - or the new HTML5 standard of using 
      the 'data-' prefix i.e.: data-default="some default" */ 
     if(el.val() == '') 
      el.val(el.attr('title')); 
    }); 
}); 

---

沿HTE線更新

瀏覽器逐漸實現placeholder屬性，它提供了顯示一個 「提示」 的能力用戶。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 5

在您的螢火蟲試試這個：

$(function() { console.log($(this)) }); 

你會發現，

var defaultText = $(this).val(); 

可能不是你想要的。

如果輸入的初始值是默認的文本，得到這樣的：

var defaultText = $('input[type=text]').val() 

要知道，這將正常工作，只有在有你的頁面上只有一個輸入文本。

而且還去掉引號：

$(this).val('defaultText'); 

Answer 6

使用HTML5屬性佔位每個輸入標籤，如：

<input type="text" value="original text value" placeholder="default value" /> 

Answer 7

這種解決方案需要的jQuery！

我一個utils的模塊中包裹該功能像這樣：

var utils = (function() { 
    var utils = {}; 
    //some other properties... 
    utils.setupAutoclearInputs = function() { 
     $('.input-autoclear').each(function() { 
      $(this).data('default', $(this).val()).addClass('gray'); 
     }).focus(function(e) { 
      if (!($(this).val() !== $(this).data('default'))) { 
       $(this).removeClass('gray').addClass('black').data('modified', true).val(''); 
      } 
     }).blur(function(e) { 
      if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') { 
       $(this).removeClass('black').addClass('gray').val($(this).data('default')); 
      } 
     }); 
    } 
    //some other methods... 
    return utils; 
}()); 

在HTML：

地址：class="input-autoclear"您要包括在每個輸入。

設置默認值：<input ... value="defaultValue" ... >

創建灰色和黑色文字，或任何你想要一些CSS類。

我個人用的是.gray { ... }和.black { ... }，但你可能想要更好的名字。

最後：

消防使用utils的模塊方法：

$(document).ready(function() { 
    ... 
    utils.setupAutoclearInputs(); 
    ... 
} 

確保該模塊的代碼存在的的document.ready外呼，你可能會希望它在全球範圍內的應用。

有關正確的javascript模塊編寫的更多信息，請訪問article。

Answer 8

var q = $('#q'); 
q.focus(function() { 
    if ($(this).attr('data-default') == $(this).val()) { 
     $(this).val(''); 
    } 
}).blur(function() { 
    if($(this).val() == '') { 
     $(this).val($(this).attr('data-default')); 
    } 
}); 


<input type="text" name="q" id="q" data-default="Search..." value="Search..."/> 

Answer 9

這將使用.data（）函數爲您保存默認文本。所以不需要額外的標記。

$('input').focus(function() { 
    if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val()); 
    if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val(""); 
}).blur(function(){ 
    if ($(this).val() == "") $(this).val($(this).data("DefaultText")); 
}); 

Answer 10

$('.myclass').each(function() { 
    var default_value = this.value; 
    $(this).css('color', '#666'); // this could be in the style sheet instead 
    $(this).focus(function() { 
     if(this.value == default_value) { 
      this.value = ''; 
      $(this).css('color', '#333'); 
     } 
    }); 
    $(this).blur(function() { 
     if(this.value == '') { 
      $(this).css('color', '#666'); 
      this.value = default_value; 
     } 
    }); 
}); 
<input type="text" class="myclass" size="30" value="type here" /> 

Answer 11

這是工作！我自己使用它：

/* Forminputs löschen und wiederherstellen */ 
jQuery(function() { 
    var input = jQuery('#userForm input[type=text], #userForm textarea'); 

    input.focus(function() { 

     jQuery(this).attr('data-default', jQuery(this).val()); 
     jQuery(this).val(''); 

    }).blur(function() { 
     var el = jQuery(this); 

     if (el.val() == '') 
      el.val(el.attr('data-default')); 
    }); 
}); 

Answer 12

我funetuned此代碼一點點。

$(document).ready(function() { 
    var defaultText = ''; 
    $('.input-focus-clear').focus(function() { 
     defaultText = $(this).val(); 
     $(this).val(''); 
    }); 
    $('.input-focus-clear').blur(function() { 
     var newText = $(this).val(); 
     if (newText.length < 1) { 
      $(this).val(defaultText); 
     } 
    }); 
});