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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (38)

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

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

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

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

现在我得到第二个问题。我怎样才能改变占位符的颜色?这是我的文本区域:http : //jsfiddle.net/wy8cP/1/

提问于
用户回答回答于

以下是您如何使用HTML5获取占位符:

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

我不再推荐像下面展示的那样将自己的polyfills组合在一起。您应该使用Modernizr首先检测是否需要填充,然后激活符合您需要的填充库。Modernizr wiki中列出了很多占位符polyfills 。

ORIGINAL(续):

这里是一个兼容的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/

更好的填充方法是在页面加载时运行此脚本,并将占位符置于数据占位符属性中,以便您的标记看起来像这样:

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励