javascript - 如果 .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/

编辑

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

As for the jQuery option, that simply wouldn't do as it needs the original value= value. I have perhaps 8 different text fields, the instructions for which are the value, e.g. "Enter your email address", "Enter your url", etc :(.

$('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/