在js(jquery)中获得文本框焦点和失去焦点的方法

最新推荐文章于 2023-12-01 16:33:10 发布

转载最新推荐文章于 2023-12-01 16:33:10 发布 · 3.5k 阅读

Web前端开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用jQuery的focus()和blur()方法来处理元素的焦点事件。通过一个搜索框的例子展示了当获得或失去焦点时如何改变元素的内容。

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('搜神马？'); 

}); 

})