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,添加高亮等,根据自己的需求即可。

相关推荐