對文本框最用的操作就是當用戶選中文本框時它的顏色變化，當失去焦點時恢復為原來的樣式。

首先定義一個焦點的樣式

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

然后為元素設置focus和blur事件的響應函數。

$(document).ready(function(){
  $("input").focus(function(){
    $(this).addClass("focus");
  }).blur(function(){
    $(this).removeClass("focus");
  });
});

對于textarea也可以這么使用，我們也可以通過jQuery動態改變textarea的高度。html頁面設置2個按扭，點擊這兩個按鈕可以增加或者減少textarea的高度。我們為這2個按鈕增加鼠標點擊事件就可以

var $comment = $("#comment");
 $(".bigger").click(function(){
  if($comment.height() < 500){
    $comment.height($comment.height() + 50);
  }
});
$(".smaller").click(function(){
  if($comment.height() > 50){
    $comment.height($comment.height() - 50);
  }
});

對于textarea還有一個操作，也就是滾動條上下滾動的操作，也和上面一樣，只是把height方法改成scrollTop方法就行了。

接下來對多選框進行操作。

<form action="#">
你愛好的運動是？<br />
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="籃球" />籃球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球    
  <input type="checkbox" name="items" value="乒乓球" />乒乓球<br />
  <input type="button" id="CheckedAll" value="全選">
  <input type="button" id="CheckedNo" value="全不選">
  <input type="button" id="CheckedRev" value="反選">
  <input type="button" id="send" value="提交">
</form>

按下這4個按鈕分別進行相應的操作：

$(document).ready(function(){
  $("#CheckedAll").click(function(){
    $("form input[name=items]:checkbox").prop("checked", "checked");
  });
    
  $("#CheckedNo").click(function(){
    $("form input[name=items]:checkbox").prop("checked", false);
  });
    
  $("#CheckedRev").click(function(){
    $checked = $("form input[name=items]:checkbox");
    $checked.each(function(){
      $(this).prop("checked", !$(this).prop("checked"));
    });
  });
    
  $("#send").click(function(){
    var str = "你選中的是\n";
    $("form input[name=items]:checkbox:checked").each(function(){   
      str += $(this).val() + "\n";
    });
    alert(str);
  });
});

對于表單的操作還有一個最常用的就是表單驗證。比如我們有以下代碼

<form action="#" >
  <div class="int">
    <label for="username">用戶名：</label>
    <input type="text" id="username" class="required" />
  </div>
  <div class="sub">
    <input type="submit" value="提交" id="send"/>
  </div>
</form>

我們想要把用戶名設置為必須輸入的項，在顯示的時候在用戶名文本框后加上*字符。在輸入用戶名的時候至少需要輸入6個字符，如果用戶停止輸入的時候發現少于6個字符則提醒用戶。還有在用戶提交的時候如果用戶名輸入符合規范則不提交。

$(document).ready(function(){
    $("form :input.required").each(function(){
        var $required = $("<strong>*</strong>");
        $(this).parent().append($required);
    });
    
    $("form input").blur(function(){
        var $parent = $(this).parent();
        if($(this).is("#username")){
            $parent.find(".msg").remove();
            if(this.value == "" || this.value.length < 6){
                var errorMsg = "請輸入至少6位用戶名";
                $parent.append("<span class=\"msg error\">" + errorMsg + "</span>");
            } else {
                var okMsg = "輸入正確";
                $parent.append("<span class=\"msg\">" + okMsg + "</span>");
            }
        }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    });
    
    $("#send").click(function(){
        $("form .required:input").trigger("blur");
        var error = $("form .error").length;
        if(error){
            return false;
        }
        alert("成功");
    });
});