在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 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
初识Node.js
Sep 03 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS常用知识点整理
Jan 21 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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读取和编写XML DOM的实现代码
2011/02/03 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
低版本中Python除法运算小技巧
2015/04/05 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
初学者学习Python好还是Java好
2020/05/26 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
教师旷工检讨书
2014/01/18 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python