JS --- 点击input文本框，文字消失

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30919429

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lancee/archive/2011/11/04/2235867.html

本文介绍了一种使用JavaScript实现的网页输入框效果，当用户点击输入框时，内置的提示文字会自动消失，帮助提升用户体验。该效果适用于登录表单等场景。

http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>建站学JS点击输入框，框内文字消失实例www.jzxue.com</title>
<script type="text/javascript">
//得到焦点时触发事件
function OnFocusFun(element,elementvalue)
{
if(element.value==elementvalue)
{
element.value="";
element.style.color="#000";
}
}
//离开输入框时触发事件
function OnBlurFun(element,elementvalue)
{
if(element.value==""||element.value.replace(/\s/g,"")=="")
{
element.value=elementvalue;
element.style.color="#999";
}
}
</script>
</head>
<body>
<div>欢迎学习建站学点击<strong>输入框</strong>框内文字消失实例</div>
<div>
<span>账号：</span>
<input type="text" value="请输入用户名" id="UserId" onfocus="OnFocusFun(this,'请输入用户名')" style="color:#999" onblur="OnBlurFun(this,'请输入用户名')"/>
</div>
<div>
<span>密码：</span>
<input type="text" value="请输入密码" id="Password" onfocus="OnFocusFun(this,'请输入密码')" onblur="OnBlurFun(this,'请输入密码')" style="color:#999" />
</div>
</body>
</html>