JS点击输入框让默认文字消失代码

最新推荐文章于 2023-02-17 08:40:07 发布

weixin_30692143

最新推荐文章于 2023-02-17 08:40:07 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wangcan1216/archive/2011/03/14/1983799.html

本文提供了一种使用JavaScript处理输入框默认文字的方法，通过onfocus和onblur事件确保当用户点击输入框时默认文字消失，离开时若未输入内容则默认文字重新出现。特别针对空格输入进行了处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS点击输入框让默认文字消失代码</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>
    	<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>

网络上有很多相关的文章，我大致搜索了下发现很多都是判断不完善的，特别是对于空格的问题，

有时人们可能一不小心没有输入文字，但是却敲了下空格的情况。以上的代码，其中用正则对空格问题也做了判断。

转载于:https://www.cnblogs.com/wangcan1216/archive/2011/03/14/1983799.html