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 相关文章推荐
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
jquery默认校验规则整理
Mar 24 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Bootstrap表单布局
Jul 19 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
Angular 容器部署的方法
Apr 17 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue程序调试的方法
2019/06/17 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python列表计数及插入实例
2014/12/17 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
秋季运动会稿件
2014/01/30 职场文书
岗位职责风险点
2014/03/12 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
施工安全协议书范本
2014/09/26 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年招生工作总结
2015/05/04 职场文书
工程款申请报告
2015/05/15 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书