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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
js检测用户输入密码强度
Oct 22 Javascript
精通JavaScript的this关键字
May 28 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
ES6小技巧之代替lodash
Jun 07 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue slot与传参实例代码讲解
2019/04/28 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
小程序实现录音功能
2020/09/22 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
python简单实现获取当前时间
2016/08/27 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
思想品德自我评价
2014/02/04 职场文书
小学数学教研活动总结
2014/07/01 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
Python内置数据类型中的集合详解
2022/03/18 Python