隐藏字段中的默认文本 - Javascript?

时间:2013-05-04 17:34:00

标签: javascript hide field

我希望当我点击任何字段时,默认文本将被隐藏,当我在其中输入文本时,我再次单击相同的字段,文本将不会隐藏它。

我尝试了这段代码,但它不起作用

JAVASCRIPT CODE:

for(var i = 0; i < inputs.length; i++) {
    inputs[i].onfocus = function() {
        if(typeof value1 != undefined) {
             this.value = value1;

        }else {
            value = this.value;
            this.value = '';
            this.style.color = "#000";
        }
    }

    inputs[i].onblur = function() {
            if(this.value == '' || this.value == value) {
                this.value = value;
                this.style.color = "#707070";
            }else {
                value1 = this.value;
            }
        }
    }
}

2 个答案:

答案 0 :(得分:2)

您在寻找占位符属性吗?

<input type="text" name="fname" placeholder="First name">

如果您不想要HTML 5,则必须模拟。您必须添加一个类来标记输入字段的“状态”并对其进行测试。

<input id="fname" type="text" value="enter first name" />
<input id="lname" type="text" value="enter last name" />

$("input[type='text']").each(function () {
    $(this).focus(function () {
        if ($(this).hasClass("has-input")) {
            $(this).val($(this).val());
        } else {
            $(this).val("");
        }
    })

    $(this).blur(function () {
        if ($(this).val() !== '') {
            $(this).addClass('has-input');
        } else {
            $(this).removeClass('has-input');
        }
        if (!$(this).hasClass('has-input')) {
            $(this).val($(this).attr('value'));
        }
    })

});

查看小提琴:http://jsfiddle.net/djwave28/sq7V3/3/

答案 1 :(得分:0)

类似的东西:

var box=document.getElementById("text");
function clearTextbox(){ if(box.value==="Default")box.value=""; }
function checkContent(){ if(box.value==="") box.value="Default" }
box.addEventListener("focus", clearTextbox);
box.addEventListener("blur", checkContent);

http://jsfiddle.net/cr8dH/1/

更通用的版本:http://jsfiddle.net/cr8dH/5/