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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
简单实现js轮播图效果
Jul 14 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 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
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python实现针对中文排序的方法
2017/05/09 Python
谈谈python中GUI的选择
2018/03/01 Python
多个应用共存的Django配置方法
2018/05/30 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python super()函数的基本使用
2020/09/10 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
司机辞职报告范文
2014/01/20 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
党员民主生活会材料
2014/12/15 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书