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

Question

我希望当我单击任何字段时，默认文本将被隐藏，当我在其中输入文本并再次单击同一字段时，文本不会被隐藏。

我试过这段代码，但它不起作用

JAVASCRIPT代码：

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

Answer 1

您在寻找占位符属性吗？

<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/

Answer 2

就像是：

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/