對文本框最用的操作就是當用戶選中文本框時它的顏色變化她肯，當失去焦點時恢復為原來的樣式氧急。
首先定義一個焦點的樣式
.focus{
border: 1px solid #f00;
background: #f00;
}
然后為元素設(shè)置focus和blur事件的響應(yīng)函數(shù)拧额。
$(document).ready(function(){
$("input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});
對于textarea也可以這么使用来氧，我們也可以通過jQuery動態(tài)改變textarea的高度舒憾。html頁面設(shè)置2個按扭，點擊這兩個按鈕可以增加或者減少textarea的高度居灯。我們?yōu)檫@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個按鈕分別進行相應(yīng)的操作：
$(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>
我們想要把用戶名設(shè)置為必須輸入的項，在顯示的時候在用戶名文本框后加上*字符。在輸入用戶名的時候至少需要輸入6個字符柱恤，如果用戶停止輸入的時候發(fā)現(xiàn)少于6個字符則提醒用戶数初。還有在用戶提交的時候如果用戶名輸入符合規(guī)范則不提交。
$(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("成功");
});
});