站长论坛

标题: 用jQuery处理文本框的焦点[focus]状态 [打印本页]

作者: sunhw0725 时间: 2009-12-26 10:39
标题: 用jQuery处理文本框的焦点[focus]状态
我们知道，浏览器的文本框的聚焦(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/javasc ... uery-browserdetect/

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)