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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python urlopen 使用小示例
2008/09/06 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python中的元组介绍
2019/01/28 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python笔记之观察者模式
2019/11/20 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python怎么对数字进行过滤
2020/07/05 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
妇产医师自荐信
2014/01/29 职场文书
个人授权委托书范文
2014/09/21 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android