提醒输入框的文字数目 _Web前端

提示输入框的文字数目

??? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
??? <html xmlns="http://www.w3.org/1999/xhtml">
??? <head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??? <title</title>
??? <script type="text/javascript">
??? window.onload = function(){
??????? var oH2 = document.getElementsByTagName('h2')[0];
??????? var oTextarea = document.getElementsByTagName('textarea')[0];
??????? var oButton = document.getElementsByTagName('button')[0];
??????? var aRadio = document.getElementsByName('radio');
??????? function Fallback(){
??????????? oTextarea.value != '' ? oButton.className = 'button' : oButton.className = 'button1';
??????????? if(aRadio[0].checked == true){
??????????????? if(WordLength(oTextarea) > 140){
??????????????????? sum = 0;
??????????????????? for(i=0;i<oTextarea.value.length;i++){
??????????????????????? sum += LimitLength(oTextarea.value.substr(i,1));
??????????????????????? if(sum > 140)oTextarea.value = oTextarea.value.substr(0,i);
??????????????????? }
??????????????? }
??????????????? Limit(oTextarea,140,oH2);
??????????? }else{
??????????????? Limit(oTextarea,140,oH2);
??????????? }
??????? }
??????? oTextarea.onkeyup = Fallback;
??????? oButton.onclick = function(){this.className=='button1' ? Error(oTextarea) : (font_count < 0 ? Error(oTextarea) : alert('发布成功！'));};
??????? oTextarea.oncontextmenu = function(){return false;};
??? }

??? function LimitLength(obj){
??????? var iLen = obj;
??????? var iLimitLength = 0;
??????? var iLimitLength = iLen.match(/[^ -~]/g) == null ? iLen.length : iLen.length + iLen.match(/[^ -~]/g).length;
??????? return iLimitLength;
??? }
??? function WordLength(obj){
??????? var oVal = obj.value;
??????? var oValLength = 0;
??????? oVal.replace(/\n*\s*/,'')=='' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length + oVal.match(/[^ -~]/g).length;
??????? return oValLength
??? }
??? function Limit(obj,iNow,tit){
??????? var oValLength = WordLength(obj);
??????? font_count = Math.floor((iNow-oValLength)/2);?
??????? if(font_count>=0){
??????????? tit.innerHTML = "请文明发言，还可以输入<span>"+font_count+"</span>字";
??????????? return true;
??????? }else{
??????????? tit.innerHTML = "已超出<span style='color:red'>"+Math.abs(font_count)+"</span>字";
??????????? return false;
??????? }
??????? return font_count
??? }
??? function Error(obj){
??????? var oTimer = null;
??????? var i=0;
??????? oTimer = setInterval(function(){
??????????? i++;
??????????? i==5 ? clearInterval(oTimer) : (i%2==0 ? obj.style.backgroundColor = '' : obj.style.backgroundColor = '#ffd4d4');
??????? },100);
??? }
??? </script>
??? </head>

??? <body>
??? <div class="box">
??????? <h2>请文明发言，还可以输入<span>70</span>字</h2>
??????? <label><textarea></textarea></label>
??????? <div class="btn">
??????????? <div class="sel">
??????????????? <input type="radio" name="radio" checked="checked"><label>文字自动回退</label><input type="radio" name="radio"><label>数字提醒超出</label>
??????????? </div>
??????????? <button class="button1"></button>
??????? </div>
??? </div>
??? </body>
??? </html>