在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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
pyhton列表转换为数组的实例
2018/04/04 Python
transform python环境快速配置方法
2018/09/27 Python
linux环境下Django的安装配置详解
2019/07/22 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
吨的认识教学反思
2014/04/27 职场文书
新文化运动的基本口号
2014/06/21 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
天坛导游词
2015/02/02 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Python 键盘事件详解
2021/11/11 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL