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的.animate()函数在IE6下的问题
Dec 03 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
详解JavaScript原型与原型链
Nov 16 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切割汉字的常用方法实例总结
2019/04/27 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python字符串与url编码的转换实例
2018/05/10 Python
python自动化报告的输出用例详解
2018/05/30 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python如何解除一个装饰器
2020/08/07 Python
python实现三壶谜题的示例详解
2020/11/02 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
新春文艺演出主持词
2014/03/27 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
投诉信格式范文
2015/07/02 职场文书
Nginx配置https的实现
2021/11/27 Servers
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers