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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
js单词形式的运算符
May 06 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Promise静态四兄弟实现示例详解
Jul 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
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python中p-value的实现方式
2019/12/16 Python
python实现双色球随机选号
2020/01/01 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
益模软件Java笔试题
2012/03/27 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
人事文员岗位职责
2014/02/16 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
初婚未育证明样本
2014/10/24 职场文书
会计主管竞聘书
2015/09/15 职场文书
人事任命书范本
2015/09/21 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python