如果.focusout表单不包含值，则恢复为原始值

If on .focusout form contains no value, revert to original value?

本文关键字：恢复 原始 focusout 表单 包含值 如果      更新时间：2023-09-26

我试图让我的<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);
    }
});

任何改变/建议，让它工作将是最感激的;)!

你应该考虑使用HTML5 placeholder属性作为第一选择。

http://diveintohtml5.ep.io/forms.html占位符使用jQuery，您可以像这样修改原始脚本:

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

例子: http://jsfiddle.net/jasongennaro/8bJcQ/

编辑

这是一个修改后的脚本来处理你评论中提到的情况:

至于jQuery选项，这根本无法满足它的需求原始值=值。我大概有8个不同的文本框说明其值，例如:"输入您的电子邮件地址"，"输入你的url"等:(.

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

假设使用现代浏览器，有一种更简单的方法可以做到这一点。只需添加属性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()的。jQuery API解释了两者之间的区别。

相关文章：