仿QQ签名

 

<html>
<script src="http://code.jquery.com/jquery-git.js"></script>

<SCRIPT LANGUAGE="JavaScript">
var maxCharNum = 21

//事件绑定
$(document).ready(function(){

 $('#charnum').html(maxCharNum);
 changeCharnum('#sign_content',maxCharNum);
 //按键改变字数
 $("#sign_content").keyup(function(event){//表名在节点sign_content获取焦点之后绑定keyup事件
  changeCharnum(this,maxCharNum);
  if(event.ctrlKey&&event.keyCode==13)addSign();//绑定ctrl+回车键发布签名
 }).blur(function(){
  changeCharnum(this,maxCharNum);
 }).focus(function(){
  changeCharnum(this,maxCharNum);
 });

});
 //改变字数
function changeCharnum (obj,num){
 if( $(obj).length >0 ){
  var len = $(obj).val().length;
  var charNumObj = $('#charnum');
  
  if(len==0){
   charNumObj.html( (num-len) );
  }else if( len > num ){
   charNumObj.css('color','red').html( (num-len) );
  }else if( len <= num ){
   charNumObj.css('color','').html( (num-len) );
  }
 }
}

//发布前内容检测
function checkTextArea (num){
 //内容不能为空
 if($('#sign_content').val() == '' ){
  alert('内容不能为空');  
  return false;
 }
 //内容字数不能超过maxCharNum个字
 if( $('#sign_content').val().length > num ){
  alert('内容不能超过'+maxCharNum+'个字符');
  return false;
 }
 return true;
}

//发表
function addSign(){
 if( checkTextArea(maxCharNum) ){
  //设置发布按钮不可点击,取消ctrl+enter的绑定操作
  $('#button_addSign').attr('disabled','disabled');
  var content = $("#sign_content").val();
  var len = $('#sign_content').val().length;

  $.post(addSign.action,{content:content,len:len},function(txt){
   if( txt == '1' ){
    alert('超过'+maxCharNum+'个字符');
    return ;
   }
   if( txt ){
    $('#sign_content').val('');
    $('#button_addSign').attr('disabled','');
    location.reload();
   }else{
    alert('发布失败');
   }
  });
 }
}
</SCRIPT>

<body >
 <textarea id='sign_content' keydown="changeCharnum()">
 </textarea>

 还剩余<span id='charnum'></span>个字<br />

 <button id="button_addSign" onclick="addSign()">发表</button>
</body>
</html>

posted @ 2012-08-28 11:50  优秀程序缘  阅读(197)  评论(0编辑  收藏  举报