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


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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
element-ui表格合并span-method的实现方法
May 21 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学习之PHP运算符
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python实现飞机大战小游戏
2019/11/08 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
行政办公室岗位职责
2014/03/18 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
计划生育汇报材料
2014/12/26 职场文书
学校少先队工作总结
2015/08/12 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang