码迷,mamicode.com
首页 > 其他好文 > 详细

点击文本框清除默认文本离开再恢复

时间:2016-01-11 23:37:01      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

点击文本框清除默认文本离开再恢复:
很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框。
代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

 

以上代码实现了我们的要求,当点击文本框的时候能够清除文本框中的内容,如果文本框没有输入任何内容,这个时候鼠标焦点离开文本框的时候,会将文本框的值恢复到默认状态。不过如果密码框肯恩有点麻烦,因为密码框并非显示的明文,解决方案可以参阅如何实现在密码框如出现提示语一章节。
相关阅读:
1.onclick事件可以参阅javascript的onclick事件一章节。
2.onblur事件可以参阅javascript的onblur事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9421

更多内容可以参阅:http://www.softwhy.com/javascript/

 

点击文本框清除默认文本离开再恢复

标签:

原文地址:http://www.cnblogs.com/softwhy/p/5122862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!