使用 Jquery 的表单元素的占位符

Question

首先我想提一下，这个问题的目的不是询问它是如何完成的，而是要了解为什么我这样做的方式有效。

我想为表单元素创建占位符文本，在玩 jquery 时我想出了以下代码：

function placehold(id,placeholder) // id of element and placeholder text
{
    $("#"+id).val(placeholder); //initialize form field

    $("#"+id).focusin(function() //on focus
    {
        if ($(this).val()==(placeholder))
        {
            $(this).val(null); 
            /*if input's value is placeholder then empty
              input and wait for value */
        }        
    });


    $("#"+id).focusout(function() //on lost focus
    {
        if ($(this).val()==(""))
        {
            $(this).val(placeholder); //reset val to placeholder text if empty
        }        
    });
}

即使我在多个字段上调用该函数，这也会起作用，例如，

placehold('uname','Please enter a username');
placehold('pword','Please enter a password);
placehold('email','Please enter an email address');

在上述情况下，它将按预期在所有 3 个文本框中工作，这就是我的问题： 运行时不同的占位符存储在哪里？是为其绑定的每个字段保留的函数实例吗？如果是，从长远来看，这会对性能产生影响吗？

感谢您的时间和帮助:)

Answer 1

是为其绑定的每个字段保留的函数实例吗？

是的。每次调用placehold()，都会创建新的事件处理函数。 id 和 placeholder 的值作为您创建的闭包的一部分保留。

如果是，从长远来看，这会对性能产生任何影响吗？

按照您的做法，您调用placehold() 的每个元素都会产生一些开销。不过，我不会担心这一点，它确实可以忽略不计。

重用事件处理函数会更好：

function placeholderEmpty() { 
    var $this = $(this);
    if ( $this.val() == $this.data("placeholder") ) {
        $this.val(""); 
    }        
}
function placeholderDefault() {
    var $this = $(this);
    if ( $this.val() == "" ) {
        $this.val( $this.data("placeholder") ); 
    }        
}

function placehold(id,placeholder) {
  $("#"+id).data("placeholder", placeholder) 
  .focusin(placeholderEmpty)
  .focusout(placeholderDefault)
  .trigger("focusout");
} 

下一步将是一个插件（注意使用另一个闭包）：

$.fn.extend({
  placehold: function () {
    var placeholderEmpty   = function () { /* ... */ };
    var placeholderDefault = function () { /* ... */ };

    return function(placeholder) {
      this.data("placeholder", placeholder) 
      .focusin(placeholderEmpty)
      .focusout(placeholderDefault)
      .trigger("focusout");
      return this; 
    }
  }();
});

用作

$('#uname').placehold('Please enter a username');
$('#pword').placehold('Please enter a password');
$('#email').placehold('Please enter an email address');
$('.manyTextFields').placehold('All get the same text & behavior.');