等待-放飞梦想

勤现在-乐将来

用jQuery处理文本框的焦点[focus]状态

Await / 前端交互 / 2008/11/25 9:22 / 热度(10,864)

我们知道,浏览器的文本框的聚焦(focus)样式可以通过CSS的伪类:focus来设置。假设我们有这么一段代码:

<form>
<dl>
<dt>Name: <dt>
<dd><input type="text" /></dd>
<dt>Password: <dt>
<dd><input type="password" /></dd>
<dt>Textarea: <dt>
<dd><textarea></textarea></dd>
</dl>
</form>

我们可以通过下面的CSS来给它定义:

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #ccc; background: #fcc; }

这样定义是不是很简单。但却有个问题。可万恶的IE6去不支持这个foucs。那怎么办,只能用JavaScript来解决了。
在这里我们用看看怎么用jQuery处理(发现最近很迷恋JQ…囧)。我们先用JQ来获取元素。JQ的选择器用法之前也介绍了一些,在这里我们用下面的代码获取input元素:

$("input[@type='text'], input[@type='password'], textarea")

获取元素后就要通过JQ的事件处理onfocus来处理,不过JQ并不喜欢这个on,所以就直接foucs。我们来看下现在的代码:

$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this).css({background:"#fcc", border:"1px solid #ccc"})} );

现在刷新下看是不是成功了。虽然效果实现了但还没完成,在上面的代码中,只有处理聚焦的情况,那么当失去焦点的时候呢?嗯,我们不要想当然,失焦?那么聚焦的样式不是就会自动清楚清除了吗?事实上不会的,除非我们明确告诉它。OK,我们继续处理失去焦点时的状态:

$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #FFc"})})

说到这里不得不说下jQuery的强大之处了,jQuery对象可以接受无数个函数回调/消息/方法,也就是传说中的Chainability。也就是说我们不必要分两行写,一气呵成:

$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this).css({background:"#fcc", border:"1px solid #ccc"})}).$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #FFc"})});

现在真的完成了,但还是有些可以做得更好的地方,比如上面的JS代码中直接写入CSS。如果你觉得这样不好的话可以把CSS提出来,定义一个类(IE_focus)。然后把“.css({background:”#fcc”, border:”1px solid #ccc”})”换成“.addClass(“IE_focus”)”。还有上面所有的JS都只是针对IE的,其他浏览器都可以使用CSS来实现。SO…我们可以再加个判断($.browser.msie)。最终完整的代码如下:

$(document).ready(function(){
if ($.browser.msie){
      $
("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this).css({background:"#fcc", border:"1px solid #ccc"})}).$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #FFc"})});
}
});

顺便在这里介绍一个JQ的插件[jQBrowser],用来判断浏览器的类型。支持的浏览器类型很多:

var aol         = $.browser.aol();       // AOL Explorer
var camino    = $.browser.camino();    // Camino
var firefox     = $.browser.firefox();   // Firefox
var flock     = $.browser.flock();     // Flock
var icab      = $.browser.icab();      // iCab
var konqueror = $.browser.konqueror(); // Konqueror
var mozilla   = $.browser.mozilla();   // Mozilla
var msie      = $.browser.msie();      // Internet Explorer Win / Mac
var netscape  = $.browser.netscape()// Netscape
var opera     = $.browser.opera();     // Opera
var safari    = $.browser.safari();    // Safari

更详细的内容请查看官方的说明:http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/

评论(3)

  1. 逆风飞扬
    2010/03/10

    顶楼主分享精神

  2. Yacca
    2008/11/26

    我也隐藏后不再关注 哈哈

  3. xiaorsz
    2008/11/25

    链接已做好,刚有点事,不好意思哈!
    自从隐藏了输入框,已经很久没见过自己的文本框了。呵呵,不过方法还是学习了,备用。希望以后能多分享些css和jquery方面的技巧,哈哈!!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件,快速提升流量