付琦的博客

 

要实现这个效果必须做到两点：
第一、为表单添加即时监测事件
第二、判断获取到的内容长度【关系到中英文】

 

我们先来看看事件的监听：
IE用 onpropertychange
其他浏览器用 oninput
要了解这两处的内容请看以前写的一篇博文 监听输入框值的即时变化onpropertychange、oninput

 

再来看看判断字符串长度：
一个汉字 = 2个字符， 一个英文 = 1个字符
下面这个函数可以返回字符串长度

function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符
 return str.replace(/[^\x00-\xff]/g,"xx").length;
};

 

下面是主体函数：
里面的注释应该已经很清楚了

function lengthLimit(){
 var elem = F$("commentText");
 // 监听textarea的内容变化
 if(/msie (\d+\.\d)/i.test(navigator.userAgent) == true) {// 区分IE
  elem.onpropertychange = textChange;
 }else{
  elem.addEventListener("input", textChange, false);
 }
 
 textChange();// 加载时先初始化
 
 function textChange(){// 内容变化时的处理
  var text = elem.value;
  var note = F$("limitNote");
  var count = (100 – getTextLength(text))/2;// 最大限度50个汉字
  note.innerHTML = "("+ Math.round(count) +")";
  if(count <= 0){// 文字超出改变提示CSS
   note.className = "full";
  }else{
   note.className = "";
  };
 };
};

 

最后我们在为整个form添加一个检测函数进行相应处理：

function checkForm(){
 var elem = F$("commentText");
 if(getTextLength(elem.value) >= 102){// 因为一个汉字为2个字符  所以会出现101的现象
  alert("评论内容超出限制！请修正");
  elem.focus();
  return false;
 };
 
 alert("OK！请继续");
 return false;
};

 

有不明白的同学留言。