用“价值”模仿“占位符”attr

时间:2011-09-17 22:21:03

标签: javascript input placeholder

我在网上找到了这个:

var x = 0; // count for array length

$("input.placeholder").each(function(){
    x++; //incrementing array length
});

var _values = new Array(x); //create array to hold default values

x = 0; // reset counter to loop through array

$("input.placeholder").each(function(){ // for each input element
    x++;
    var the_default = $(this).val();
    var default_value = $(this).val(); // get default value.
    _values[x] = default_value; // create new array item with default value
});

var current_value; // create global current_value variable

$('input.placeholder').focus(function(){
    current_value = $(this).val(); // set current value
    var is_default = _values.indexOf(current_value); // is current value is also default value

    if(is_default > -1){ //i.e false
        $(this).val(''); // clear value
    }
});

$('input.placeholder').focusout(function(){
    if( $(this).val() == ''){ //if it is empty...
        $(this).val(current_value); //re populate with global current value
    }
});

如您所见,它会在value属性中抓取文本并将其设置为default_value。然后它会根据默认值检查current_value

我遇到了问题。

在这个例子中,我们有一个像:

这样的元素

<input type="text" class="placeholder" value="potato">

如果用户关注并取消输入,则效果很好 - 删除并重新填充“马铃薯”。

但是,假设用户输入“ioqiweoiqwe”,然后取消输入(填写表格的其余部分“)。然后他们返回我们的输入并删除所有文本,然后单击另一个字段。输入将重新填充“ioqiweoiqwe” - 实际上,我们希望用default_value重新填充。我如何设法做到这一点?

您诚挚的, jQuery nub。

注意:我在这里设置了一个jsfiddle ......稍后评论一下:http://jsfiddle.net/xmhCz/

2 个答案:

答案 0 :(得分:4)

我真的不知道该代码的问题是什么,但看起来它是由一个不太了解JavaScript的人编写的。我改写了功能:

$("input.placeholder").each(function() {
    var me=$(this);
    var defaultValue=me.val();
    me.focus(function() {
        if(me.val()===defaultValue) {
            me.val("");
        }
    });
    me.blur(function() {
        if(me.val()==="") {
            me.val(defaultValue);
        }
    });
});

测试on JSFiddle

答案 1 :(得分:0)

HTML输入有defaultValue