文本框获得焦点和失去焦点的判断代码


Posted in Javascript onMarch 18, 2012

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
onpropertychange 当属性改变发生该事件
无论粘贴 keyup onchange等,最为敏感

先来看javascript的直接写在了input上

<input name="pwuser" type="text" id="pwuser"   class="input" value="楼盘账号"   onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" /> 
<input name="pwpwd" type="password"    class="input1" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">
 

jquery实现方法

对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。

focus():得到焦点时使用,和javascript中的onfocus使用方法相同。
如:

$("p").focus(); 或$("p").focus(fn)

blur():失去焦点时使用,和onblur一样。
如:

$("p").blur(); 或$("p").blur(fn)

实例

<form>
<label for="searchKey" id="lbSearch">搜神马?</label>  这里label覆盖在文本框上,可以更好的控制样式
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
 </form>
 

jquery代码

$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马?');
});
})

好了相当的不错吧

下面是一个简单的例子:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<script> 
function tt(){ 
var i=document.form1.text1.value; if(i.length>=6) 
document.getElementById("s1").innerHTML="用户名不能大于6位"; 
else 
document.getElementById("s1").innerHTML=""; 
} 
function a(){ 
var j=document.form1.text2.value; 
if(j.length>=6) 
document.getElementById("s2").innerHTML="密码不能大于6位" 
else 
document.getElementById("s2").innerHTML=""; 
} 

</script> 
<body> 
<form name="form1"> 
用户名:<input type="text" id="text1" value="请输入用户名" onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/> 
<span id="s1"></span><br /> 
密码:<input type="text" id="text2" value="请输入密码" onfocus="javascript:document.form1.text2.value=''" onblur="a()"/> 
<span id="s2"></span><br /> 
<input type="button" id="button" value="登陆" /> 
</form> 
</body> 
</html>

第一种: html5

html5给表单文本框新增加了几个属性,比如:email,tel,number,time,required,autofocus,placeholder等等,这些属性给表单效果带来了极大的效果变化。
其中placeholder就是其中一个,它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空, placeholder的内容就是我们在页面上看到的内容。
代码如下:

<input type="text" value="" placeholder="请输入内容" />

第二种: jQuery

原理:让表单的val值等于其title值。
代码如下:

<input type="text" value="" title="请输入内容" />

<script type="text/javascript"> 
$(function() { 
var $input = $("input"); 
$input.each(function() { 
var $title = $(this).attr("title"); 
$(this).val($title); 
$(this).focus(function() { 
if($(this).val() === $title) { 
$(this).val(''); 
} 
}) 
.blur(function() { 
if($(this).val() === "") { 
$(this).val($title); 
} 
}); 
}); 
}); 
</script>

文本框获得焦点、失去焦点调用JavaScript
<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %> 
<!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 language="javascript"> 
function text1_onmouseover(it) 
{ 
it.focus(); 
it.select(); 
it.style.backgroundColor="red"; 
} 
function text1_onmouseout(it) 
{ 
it.onblur; 
it.style.backgroundColor="white"; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 #Javascript
基于jQuery的弹出框插件
Mar 18 #Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 #Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 #Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 #Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 #Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 #Javascript
You might like
php之Memcache学习笔记
2013/06/17 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python自动化报告的输出用例详解
2018/05/30 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python把1变成01的步骤总结
2019/02/27 Python
分析经典Python开发工程师面试题
2019/04/08 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
一些Unix笔试题和面试题
2012/09/25 面试题
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
小学四年级学生评语
2014/12/26 职场文书
餐厅开业活动方案
2019/07/08 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Python之matplotlib绘制饼图
2022/04/13 Python