0

我花了太多时间试图弄清楚这一点，我在 Stackoverflow 上找到了部分答案，但仍然无法正常工作。

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

我到目前为止是这样的：

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);
    }
});

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

4

6 回答 6

4

这条线是坏人

如果（值 == 输入 [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!
于 2011-06-29T20:45:06.280 回答
1

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

$('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); 
            }
        });
});
于 2011-06-29T20:52:12.293 回答
0

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

<input name="q" value="Search here ..." onfocus="if(this.value == 'Search here ...') this.value = '';" onblur="if(this.value == '') this.value = 'Search here ...';">

于 2011-06-29T20:45:50.380 回答
0

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

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

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

于 2011-06-29T20:49:02.887 回答
0

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

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

像这样的东西：

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

我相信你明白了。

于 2011-06-29T20:50:29.097 回答
0

这一切：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("");
    });
});
于 2011-06-29T20:55:49.463 回答