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的更改也在输入变量中。因此，值总是输入[i] .value，因为你获得了相同输入元素的值，当然这是相同的！

使用jquery data method保存元素中的值。并且在模糊时，再次检索它以进行比较。

像这样;

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

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

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

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

如何使JavaScript在焦点上找到输入的值，清除它是否是默认值并保留它是否是新数据？

6 个答案: