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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
Underscore源码分析
Dec 30 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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 session处理的定制
2009/03/16 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
Python全局变量用法实例分析
2016/07/19 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python中的流程控制详解
2021/02/18 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
积极贯彻学习两会精神总结
2014/03/17 职场文书
小学开学典礼主持词
2014/03/19 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
建筑工程催款函
2015/06/24 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
浅谈Python响应式类库RxPy
2021/06/14 Python