我們在QQ個(gè)人(rén)中心或者新浪微博等網站(zhàn)上(shàng)可(kě)以看到一個(gè)發表話(huà)題的應用。該應用實現了即時(shí)統計(jì)輸入字數(shù)，并且通(tōng)過ajax與後台交互，将輸入內(nèi)容插入到話(huà)題列表中。我将整個(gè)流程分為(wèi)兩部分，本文講解第一部分jquery實現前端交互操作(zuò)。

XHTML

   
140說說你(nǐ)正在做(zuò)什麽...
   
   

      
      
   



    

       
       

          
Demo發布的內(nèi)容...
           

       
       

    

XHTML是一個(gè)表單，裏面有(yǒu)輸入框textarea，發布按鈕，還(hái)有(yǒu)一個(gè)統計(jì)輸入字數(shù)的span#counter，和(hé)信息提示span#msg,在沒有(yǒu)輸入的情況下就提交則會(huì)提示用戶要求輸入內(nèi)容。

CSS

h3{height:32px; line-height:32px; font-size:18px}
h3 span{float:right; font-size:32px; font-family:Georgia,serif; color:#ccc; overflow:hidden}
.input{width:594px; height:58px; margin:5px 0 10px 0; padding:4px 2px; 
border:1px solid #aaa; font-size:12px; line-height:18px; overflow:hidden}
.sub_btn{float:right; width:94px; height:28px;}
#msg{color:#f30}
.clear{clear:both}
.saylist{margin:8px auto; padding:4px 0; border-bottom:1px dotted #d3d3d3}
.saylist img{float:left; width:50px; margin:4px}
.saytxt{float:right; width:530px; overflow:hidden}
.saytxt p{line-height:18px}
.saytxt p strong{margin-right:6px}
.date{color:#999}

jQuery

先引入jquery庫和(hé)global.js文件：

global.js文件：

global.js要做(zuò)的事有(yǒu)：

1、用戶輸入、鼠标離開(kāi)輸入框時(shí)，統計(jì)輸入的字符數(shù)，并根據輸入字數(shù)的不同而輸出不同的樣式（字體(tǐ)顔色）顯示在頁面上(shàng)。

2、處理(lǐ)提交數(shù)據：當點擊“發布”按鈕時(shí)，顯示等待圖片，通(tōng)過ajax想後台提交輸入的數(shù)據，等待後台處理(lǐ)，并将處理(lǐ)結果輸出給前端頁面。

具體(tǐ)代碼如下：

function recount(){
	var maxlen=140;
	var current = maxlen-$('#saytxt').val().length;
	$('.counter').html(current);

	if(current<1 || current>maxlen){
		$('.counter').css('color','#D40D12');
		$('input.sub_btn').attr('disabled','disabled');
	}
	else
		$('input.sub_btn').removeAttr('disabled');

	if(current<10)
		$('.counter').css('color','#D40D12');

	else if(current<20)
		$('.counter').css('color','#5C0002');

	else
		$('.counter').css('color','#cccccc');

}

函數(shù)recount()完成了輸入字符的統計(jì)，并根據輸入的字符數(shù)，顯示不同的字體(tǐ)顔色。

$(function(){
	$('#saytxt').bind("blur focus keydown keypress keyup", function(){
		recount();
	});
    $("#myform").submit(function(){
		var saytxt = $("#saytxt").val();
		if(saytxt==""){
			$("#msg").show().html("你(nǐ)總得(de)說點什麽吧(ba).").fadeOut(1200);;
			return false;
		}
		$('.counter').html('');
		$.ajax({
		   type: "POST",
		   url: "submit.php",
		   data:"saytxt="+saytxt,
		   dataType: "html",
		   success: function(msg){
			  if(parseInt(msg)!=0){
				 $('#saywrap').prepend(msg);
				 $('#saytxt').val('');
				 recount();
			 }
		  }
	    });
		return false;
	});
});

提交數(shù)據給後台後，由submit.php進行(xíng)處理(lǐ)，關于後台的處理(lǐ)程序，我在下一篇文章會(huì)重點講解，敬請(qǐng)關注。