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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
JS跨域问题详解
Nov 25 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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多线程下载远程多个文件
2013/06/25 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python如何实现转换URL详解
2019/07/02 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
python实现KNN近邻算法
2020/12/30 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
职工运动会邀请函
2014/01/19 职场文书
节约粮食标语
2014/06/18 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android