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


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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
如何在Express4.x中愉快地使用async的方法
Nov 18 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 self与$this的详解
2013/06/08 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
给Function做的OOP扩展
2009/05/07 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
python实现人工蜂群算法
2020/09/18 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
毕业生求职推荐信
2013/11/04 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
地球一小时宣传标语
2014/06/24 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
5个实用的JavaScript新特性
2022/06/16 Javascript