如果.focusout表单中没有值，则还原为原始值？

Question

我正在尝试让我的<input.../>字段在焦点上变为空白，如果在焦点上它们仍然是空白，则将它们恢复为原始值。

我会认为这会奏效，但显然不会：

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

$('input').focusout( function() {
    var new_value = $(this).val();

    if(new_value == "") {
        $(this).val(init_value);
    }
});

任何改变/建议让它工作将是非常感谢;）！

Answer 1

您应该考虑使用HTML5 placeholder属性作为第一个选项。

http://diveintohtml5.ep.io/forms.html#placeholder

使用jQuery，您可以像这样修改原始脚本：

$('input').focus(function() {
    $(this).val('');
});

$('input').focusout(function() {
   if($(this).val('')){
       $(this).val('Enter something');  
   }
});

示例： http://jsfiddle.net/jasongennaro/8bJcQ/

修改

这是一个修改过的脚本，用于处理评论中提到的情况：

  

至于jQuery选项，根本不需要它   原始值=值。我可能有8个不同的文本字段   指令的值是，例如“输入你的电子邮箱地址”，   “输入您的网址”等：（。

$('input').each(function(){

    var a = $(this).attr('value');

    $(this).focus(function() {
        $(this).val('');
    });

    $(this).focusout(function() {
       if($(this).val('')){
           $(this).val(a);  
       }
    });

});

示例2： http://jsfiddle.net/jasongennaro/8bJcQ/3/

Answer 2

假设使用现代浏览器，有一种更简单的方法。只需添加属性placeholder="some text"，浏览器就会为您处理所有这些。如果您必须支持旧版浏览器，请尝试以下操作：

var init_value;

$('input').focus( function() {
    init_value = $(this).val();
    $(this).val('');
});

$('input').blur( function() {
    var new_value = $(this).val();

    if(new_value == "") {
        $(this).val(init_value);
    }
});

您的问题是init_value的范围。您在匿名函数中定义它，并且无法从第二个匿名函数访问该值。要解决此问题，您只需在每个事件处理程序的范围之外定义init_value。

另请注意我使用.blur()代替.focusout()的方法。 The jQuery API解释了两者之间的区别。