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 fullscreen全屏实现代码
Apr 09 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php正则表达式学习笔记
2015/11/13 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
Python生成器定义与简单用法实例分析
2018/04/30 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Python模块的制作方法实例分析
2019/12/21 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
妇科医生自荐信
2013/11/05 职场文书
金融专业推荐信
2013/11/14 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
领导欢迎词致辞
2015/01/23 职场文书
公司经营目标责任书
2015/01/29 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
八年级作文之友谊
2019/12/02 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
golang 在windows中设置环境变量的操作
2021/04/29 Golang
go goroutine 怎样进行错误处理
2021/07/16 Golang