输入类型文本中的背景文本

Question

我认为这是一个简单的问题,但我不知道如何在谷歌搜索这个问题

我需要输入文本字段中的背景文本.喜欢:插入你的名字.当我按下字段插入我的名字时,文字消失了

好的,谢谢你的解决方案.

<input id="textfield" name="textfield" type="text" placeholder="correct" />

现在我得到第二个问题.如何更改占位符的颜色？这是我的文字区域:http: //jsfiddle.net/wy8cP/1/

Answer 1

以下是使用HTML5获取占位符的方法:

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

编辑:

如下所示,我不再建议将您自己的填充物混合在一起.您应该首先使用Modernizr来检测是否需要填充,然后激活适合您需要的填充库.Modernizr wiki中列出了很多占位符polyfills .

原件(续):

这是一个兼容性的polyfill:

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">

http://jsfiddle.net/q3V4E/1/

更好的填充方法是在页面加载时运行此脚本,并将占位符放在data-placeholder属性中,因此您的标记如下所示:

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

你的js看起来像这样:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value = '';
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/