如何创建具有灰色内容的文本框,当我单击它输入文本时,灰色部分将消失并允许我输入所需的文本?
示例:
“名字”文本框。“名字”这几个字在文本框中呈灰色,当我点击时,这些字就消失了,我在里面写上了我的名字。
发布于 2011-01-13 22:24:56
这个答案说明了HTML5之前的一种方法。请看一下使用placeholder
属性的现代解决方案的。
HTML:
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
JavaScript:
function inputFocus(i) {
if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}
发布于 2011-01-13 22:22:52
Chrome、火狐、IE10和Safari都支持html5占位符属性
<input type="text" placeholder="First Name:" />
为了获得更多跨浏览器的解决方案,你需要使用一些javascript,有很多预制的解决方案,尽管我不知道有任何解决方案。
发布于 2011-01-13 22:25:59
使用HTML5,您可以使用以下命令本机完成此操作:<input name="first_name" placeholder="First Name">
但并非所有浏览器都支持此功能(IE)
这可能会起作用:
<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">
否则,如果您使用的是jQuery,则可以使用.focus和.css更改颜色。
https://stackoverflow.com/questions/4681036
复制相似问题