javascript - 在空输入字段中显示占位符文本

Question

在 onfocus 期间(在输入字段上)输入默认值怎么可能被禁用，但在输入字段上可以写入默认值不存在之类的东西？

这是简单的 html =>

<input type="text" id="x">

和 javascript =>

document.getElementById("x").onfocus = function(){
this.style.opacity = 0.5;
}

但我不能做我想做的。

Answer 1

在“HTML5”中，为表单元素引入了新的功能和属性(例如内置的表单验证)

其中之一是 placeholder - 属性。它在空输入字段上显示指定的文本，在用户开始在字段中填充文本后，这些文本将被隐藏。 HTML 标记如下所示:

<input type="text" name="first_name" placeholder="Fill in your name">

此功能尚未被所有浏览器支持(您可以在 caniuse.com 上检查兼容性

在您的代码中，您可以检查一个简单函数的兼容性:

var placeHolderSupport = ('placeholder' in document.createElement('input'));

对于旧版浏览器，您需要编写后备 JavaScript - 函数，它读取此属性并自行实现行为。网络上有一些关于此的博客文章，例如 David Walsh 中的一篇。 ，这可以帮助您解决这个问题。

编辑:

我偶然发现了这个gist Hagenburger ( according blog-post )，它也应该实现你想要为旧浏览器实现的行为。 注意:它是 jQuery - 代码，不确定您是否在使用它，但即使没有，它也应该让您知道该怎么做。

因此，考虑到兼容性 - 从上面检查:

if(!placeHolderSupport){
    //gist code here (not sure if i'm allowed to copy this into my answer)
}

这样，将使用浏览器的 native 占位符实现(如果存在)，否则，JavaScript 函数将处理此问题。

2012 年 9 月 11 日更新

SO-User 和 Moderator ThiefMaster 刚刚指出了 Mathias Bynens 的一个更好更新的 jQuery 插件，它已经内置了对 placeholder 的检查 - 支持。肯定是比我发布的要点更好的实现占位符后备的方法:

jQuery Placeholder at github