如何让 JavaScript 找到焦点输入的值，如果是默认值则清除，如果是新数据则保留？

Question

我花了太多时间试图解决这个问题，并且我在 Stackoverflow 上找到了部分答案，但仍然无法解决这个问题。

我想要做的是使用一些 JS/jQuery 控制站点范围内的所有输入元素。当用户专注于输入时，如果该值与页面加载时相同，则将其清除，如果已更改，则保留它。然后在模糊时，如果该字段为空，则返回默认值。

到目前为止我所得到的是：

var input = document.getElementsByTagName('input');

$('input, textarea').focus(function() {
    value = $(this).val();

    for (var i=input.length-1; i >= 0; i--) {           
        if(value == input[i].value){
            $(this).attr("value","");   
        }   
    }
});
$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

这部分有效，它只是不断清除输入，无论它们是否已更改。我猜我存储的初始值是错误的。

Answer 1

这条线是坏人

if(value == input[i].value){

，因为 getElementsByTagName 返回一个 HTMLCollection，对 dom 的更改也在您的输入变量中。因此，值将始终是 input[i].value，因为您获得相同输入元素的值，这当然是相同的！

使用 jquery 数据方法 保存元素内的值。在模糊时，再次检索它以进行比较。

像这样;

var handlers={
    focus: function() {
        var elm=$(this),
            value=elm.val(),
            old=elm.data("placeholder");
        if (typeof old==="undefined"){
            elm.data("placeholder", value);
            old=value;
        }
        if (old==value){
            elm.val("");
        }
    },
    blur:function() {
        var elm=$(this);
        if( elm.val() == "" ) {
            elm.val( elm.data("placeholder") );
        }
    }
};
$('input, textarea').each(function(i, elem){
    $(elem).
        focus(handlers.focus).
        blur(handlers.blur);
});
//not tested, should work!

Answer 2

您只需要先存储一个默认值，然后在模糊和聚焦时引用它。

$('input, textarea').each(function() {
        var $this = $(this);
        $this.data('defaultValue', $this.val()); // stores the default value

        $this.focus( function() {
            if ($this.val() == $this.data('defaultValue')) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val( $this.data('defaultValue') ); 
            }
        });
});

再看一遍，我认为我们甚至不需要数据存储。

$('input, textarea').each(function() {
        var $this = $(this),
            defaultValue = $this.val(); // stores the default value

        $this.focus( function() {
            if ($this.val() == defaultValue) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val(defaultValue); 
            }
        });
});

Answer 3

这是我在搜索框中使用的：

Answer 4

我认为 @japrescott 是正确的，但你还有另一个问题 - 在块中：

$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

...变量 value 未在范围内定义。

Answer 5

因此，问题 1 - 输入中的集合是通过引用的，因此当您的输入更新时，它们也会在集合中更新，因此该值始终显示为默认值。

我建议不要以这种方式存储默认值，而是将它们存储为元素的一部分。加载时，您可以循环遍历元素并将值添加到“默认”属性。您还可以在服务器端添加默认属性，这样会更好。

像这样：

<input type='text' default='myval' value='myval'/>
var jInput = $('input');
if(jInput.val() == jInput.attr('default'))
...

我相信你明白了。

Answer 6

这一切都完成了： http://jsfiddle.net/uUzY3/4/

$(function() {
    $("input").each( function () {
        $(this).data('initialValue', $(this).val());
    }).bind('focus', function() {
        if ($(this).val() == $(this).data('initialValue'))
            $(this).val("");
    });
});