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实现Sleep函数的代码
Mar 04 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
vue-cli3.0 特性解读
Apr 22 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
React中的Context应用场景分析
Jun 11 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
风格模板初级不完全修改教程
2006/10/09 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JS高级运动实例分析
2016/12/20 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
python绘制双柱形图代码实例
2017/12/14 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python模块导入的方法
2019/10/24 Python
Django中modelform组件实例用法总结
2020/02/10 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
书香家庭事迹材料
2014/05/09 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
2014年征兵标语
2014/06/20 职场文书
白银帝国观后感
2015/06/17 职场文书