在js(jquery)中获得文本框焦点和失去焦点的方法


Posted in Javascript onDecember 04, 2012

先来看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('搜神马?'); 
}); 
})

好了相当的不错吧
Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
关于javascript中的typeof和instanceof介绍
Dec 04 #Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 #Javascript
js动画(animate)简单引擎代码示例
Dec 04 #Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 #Javascript
将光标定位于输入框最右侧实现代码
Dec 04 #Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
You might like
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python按比例随机切分数据的实现
2019/07/11 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
日期和时间问题
2015/01/04 面试题
自我鉴定范文200字
2013/10/02 职场文书
文明学生事迹材料
2014/01/29 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
产品包装策划方案
2014/05/18 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
感谢信范文大全
2015/01/23 职场文书
邀请函的格式
2015/01/30 职场文书
2015年科协工作总结
2015/05/19 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android