给文本框添加灰色提示文字

最新推荐文章于 2022-04-21 20:03:16 发布

原创最新推荐文章于 2022-04-21 20:03:16 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在HTML文本框中实现灰色提示文字的方法，通过onFocus和onBlur事件来控制提示文字的显示与隐藏，同时对比了该方法与淘宝登录框提示效果的区别。

<html>
<head>
<title>给文本框添加灰色提示文字</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<input type="text" id="key" name="key" value="请输入关键词" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999">
</body>
</html>

注：这段代码没有淘宝登陆框的提示效果好，淘宝的效果是在输入字符的时候才把提示字符隐藏掉，而这段代码是当输入框获得焦点的时候就把提示字符隐藏掉，淘宝主要是用了一个输入框和一个<span>再通过事件用css进行控制

另外密码提示框提示字符的控制可以参考附件中这篇文章：密码输入框那点事儿