本文介绍利用JavaScript实现文本框交互效果：点击时清除默认提示文本，失焦且无输入时恢复默认值。同时提供密码框兼容方案，通过动态切换显示两个input元素解决IE8以下type只读问题，确保提示语正常显示。
本文分享一段JavaScript代码示例，演示如何实现点击文本框时清除其中的默认提示文字，并在用户离开焦点且未输入新内容时自动恢复默认文本的功能。
相关事件基础：onclick与onblur
在实现具体功能前，需要了解相关的基础事件知识。
1、onclick事件的定义和用法: 当点击对象的时候会触发此事件。 浏览器支持: 1）、IE浏览器支持此事件。 2）、火狐浏览器支持此事件。 3）、Opera浏览器支持此事件。 4）、谷歌浏览器支持此事件。 5）、safria浏览器支持此事件。 实例代码:
<html>
<head>
<meta charset="gb2312"/>
<title>本站</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
上述示例代码为div元素注册了onclick事件处理函数。当用户点击该div时，函数执行并将div的背景颜色设置为绿色。
其次是onblur事件。当指定元素失去焦点（即用户点击其他区域或按Tab键移开）时触发此事件。示例代码展示了如何为input元素绑定onblur事件，当输入框失去焦点时，将其背景色设为绿色。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本站</title>
<style type="text/css">
.mytest{
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("username");
username.focus();
username.onblur=function(){
username.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>
上述示例代码为input元素绑定了onblur事件处理函数。当input元素失去焦点时，执行回调函数将背景颜色设置为绿色。
文本框点击清除与失焦恢复实现
接下来是核心功能：实现点击文本框清除默认文本，并在失去焦点后恢复默认文本的逻辑。
许多网站在填写信息的文本框中会预设默认提示语。当用户点击该文本框时，默认文本应被清除以便输入；当用户未输入任何内容且焦点离开文本框时，默认文本应重新显示。具体实现代码如下：
<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript">
window.onload=function()
{
var username=document.getElementById("username");
username.onclick=function()
{
if(username.value=="请输入您的姓名")
{
username.value="";
this.focus();
}
}
username.onblur=function()
{
if(username.value=="")
{
username.value="请输入您的姓名";
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>
上述代码实现了预期功能：点击文本框时清除内容；若用户未输入任何内容且焦点离开，则恢复默认值。需要注意的是，密码框的实现较为复杂，因为密码输入通常不显示明文。若需动态修改input的type属性，在IE8及更低版本中会存在兼容性问题，因为此时type属性是只读的。针对密码框显示提示语的问题，可参考后续的解决方案。
密码框提示语的兼容处理方案
如何在密码框中显示提示语？ 在登录表单中，有时需要显示“请输入用户名”或“请输入密码”等提示语。用户名框处理较为简单，但密码框因输入内容以掩码显示，直接显示提示语存在困难。若尝试动态修改input的type属性，在IE8及以下浏览器中会失败，因为type属性在此类浏览器中是只读的。因此，可采用以下替代方案：
<html>
<head>
<meta charset="gb2312">
<title本站</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
上述代码实现了在密码框中显示明文提示语的功能：当用户未输入时显示提示文本，输入时以密码掩码形式显示。 其实现原理较为简单：默认状态下使用一个type为“text”的文本框显示提示语；当用户点击该文本框时，隐藏该文本框并显示一个type为“password”的密码框，同时清空密码框内容。这实际上是通过切换两个input元素的显示状态来完成的。
以上内容为本文的全部介绍，希望能为学习JavaScript程序设计提供有益参考。