输入时的默认文本

Question

如何在输入字段上设置空白默认文本,并在元素处于活动状态时清除它.

Answer 1

在现代浏览器中,您可以placeholder在字段上设置属性以设置其默认文本.

<input type="text" placeholder="Type some text" id="myField" />

但是,在旧版浏览器中,您可以使用JavaScript捕获焦点并模糊事件:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

演示:http://jsbin.com/utecu

Answer 2

使用onFocus和onBlur事件可以实现这一点,即:

onfocus="if(this.value=='EGTEXT')this.value=''" 

和

onblur="if(this.value=='')this.value='EGTEXT'"

完整的例子如下:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />

Answer 3

或者简单地

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

一旦清除该框，这将不会回发默认文本，但也将允许用户清除该框并在自动完成脚本的情况下查看所有结果。