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

Question

怎么可能在onfocus(在输入字段上)输入默认值看起来像是被禁用但在输入字段上可以写入任何像默认值不存在？

这里是简单的html =>

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

和javascript =>

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

但我无法做我想做的事.

Answer 1

使用"HTML5",为表单元素引入了新的功能和属性(例如内置表单验证)

其中之一是placeholder- 属性.它在用户开始填充字段中的文本后,在空输入字段上显示将被隐藏的指定文本.HTML-Markup看起来像这样:

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

所有浏览器都不支持此功能(您可以检查caniuse.com上的兼容性

在您的代码中,您可以检查与简单函数的兼容性:

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

对于较旧的浏览器,您需要编写一个后备JavaScript - Function,它读取此属性并实现您的行为.网上有一些博客文章,比如大卫沃尔什的一篇,可以帮助你解决这个问题.

编辑:

我偶然发现了Hagenburger的这个要点(根据博客文章),它应该实现你想要为旧浏览器实现的行为.注意:它是jQuery - 代码,不确定你是否使用它,但即使不是,它应该给你一个想法,做什么.

所以,鉴于兼容性 - 从上面检查:

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

像这样,将使用浏览器的本机占位符实现,如果它存在,否则,JavaScript函数将处理此问题.

更新09/11/2012

SO-User和主持人ThiefMaster刚刚指出了Mathias Bynens提供的更好更新的jQuery插件,它已经内置了placeholder支持检查功能.当然,实施占位符回退的方法比我发布的要点更好:

jithub的jQuery占位符