JavaScript实现点击文本框清除默认值并失焦恢复

作者:窗边听雨时间:2026-10-29 20:21:41浏览:523

本文介绍利用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程序设计提供有益参考。

作者最新文章