在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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
js word表格动态添加代码
Jun 07 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
React组件的三种写法总结
Jan 12 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 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
德生S2000电路分析
2021/03/02 无线电
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
js验证密码强度解析
2020/03/18 Javascript
对pyqt5之menu和action的使用详解
2019/06/20 Python
简单了解python的内存管理机制
2019/07/08 Python
对Python _取log的几种方式小结
2019/07/25 Python
python实现局域网内实时通信代码
2019/12/22 Python
python操作gitlab API过程解析
2019/12/27 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
自我鉴定范文200字
2013/10/02 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
付款委托书范本
2014/10/05 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
react合成事件与原生事件的相关理解
2021/05/13 Javascript