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实现简单的手风琴特效
Nov 24 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JS前端笔试题分析
Dec 19 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
js实现导航吸顶效果
Feb 24 Javascript
jQuery设计思想
Mar 07 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
python中virtualenvwrapper安装与使用
2018/05/20 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
django ORM之values和annotate使用详解
2020/05/19 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
什么是View State?
2013/01/27 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
药品采购员岗位职责
2014/02/08 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
MySQL分区路径子分区再分区
2022/04/13 MySQL