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

<!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>

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

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

posted @ 2011-03-14 14:57  Serabert~  阅读(1991)  评论(3)    收藏  举报