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编程起步(第三课)
Feb 27 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JS中如何优雅的使用async await详解
Oct 05 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 替换模板变量实现步骤
2009/08/24 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
javascript的BOM
2016/05/03 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python导入坐标点的具体操作
2019/05/10 Python
Python 远程开关机的方法
2020/11/18 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
一份创业计划书范文
2014/02/08 职场文书
个人整改措施书面材料
2014/10/24 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
Python利用capstone实现反汇编
2022/04/06 Python
golang使用map实现去除重复数组
2022/04/14 Golang
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技