JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法


Posted in Javascript onJanuary 12, 2016

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.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>

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

鼠标离开文本框时触发js的方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="textBox.WebForm1" %> 
<!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 runat="server"> 
<title></title> 
<script type="text/javascript"> 
function validate() { 
var name = document.getElementById("txtName"); 
if (name.value == 2) { 
alert("你必须不是二!"); 
name.focus(); 
return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:TextBox ID="txtName" onblur="validate();" runat="server" /> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 #Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
提升jQuery的性能需要做好七件事
Jan 11 #Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
You might like
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python实现图片文件批量重命名
2020/03/23 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python连接mysql有哪些方法
2020/06/24 Python
浅析Python的命名空间与作用域
2020/11/25 Python
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
员工工作表扬信范文
2014/01/13 职场文书
大学生活自我评价
2014/04/09 职场文书
住房租房协议书
2014/08/20 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
终止劳动合同通知书
2015/04/16 职场文书
幽默导游词开场白
2015/05/29 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python