在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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
关于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 分库分表hash算法
2009/11/12 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
使用pip安装python库的多种方式
2019/07/31 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
餐饮主管岗位职责
2013/12/10 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
初三政治教学反思
2014/01/30 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
运动员入场词
2015/07/18 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
小学信息技术教学反思
2016/02/16 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL