在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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JQuery基础语法小结
Feb 27 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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防注入安全代码
2008/04/09 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php无限极分类实现方法分析
2019/07/04 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
车队司机个人自我鉴定
2014/04/17 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书