jQuery的单行文本框操作

 

 

我们可以对文本框进行我们需要的操作，这次我们讲解通过获取和失去焦点来改变样式。

 

 

我们现在先来解释下焦点，焦点是在页面上屏幕中闪动的的小竖线，鼠标点击可获得光标，Tab键可按照设置的Tabindex切换焦点。我们在输入密码或者数据是光标点一下，就获取了焦点  鼠标了离开时就失去了焦点。

 

我们先创建一个表单，HTML代码如下：

 

<form action= "#"  method= "POST"  id=" regform">
    <fieldset>
         <legend>个人基本信息</legend>
           <div>
               <lable  for="username">名称</lable>
               <inputs id= "username"  type="text">
           </div>
           <div>
                <lable  for="pass">密码</lable>
                <inputs id="pass "   type="password">
            </div>
            <div>
                <lable  for="msg">详细信息</lable> 
                <textarea id="msg" ></txetarea>
            </div>
    </fieldset>
</form>

 

 

 

当文本框获取焦点是需要添加样式，失去焦点时会变为原来的样式 这样会加大用户体验，我们有两种方法来实现，我们先用CSS来实现，代码如下：

 

inputs:focus .textarea:focus{
     border: 1px solid #f00;
     background: #fcc;
}

 

但是IE6不支持除超链接之外的：hover伪类选择符，此时我们可以用jQuery来实现功能。

 

 

我们首先在CSS中添加一个样式，类名为focus

 

.focus{
      border: 1px solid #f00;
      background:  #fcc;
}

 

现在为文本添加获取和失去焦点的事件；代码如下：

 

$(function(){
    $(":inputs").focus(function(){
         $(this).addClass("focus");
    }).blur(function(){
         $(this).removeClass("focus");
     });
});

 

 

 

现在经过处理后 在IE6中也能达到想要的效果。我们还可以用上面的方法改变一些其他样式，比如改变文本框大小，或者background，添加高亮等，根据自己的需求即可。