文本輸入框計算和限制輸入字數

一:文本輸入框,限制輸入字數,漢字兩個字符,其他數字,符號,字母,回車,空格等一個字符

<html>
<div id="updateDiv" class="display_none">
                <textarea id="updateInput" class="updateInput" style="height:300px;width:300px"
 onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);"
 placeholder="請輸入您的申請理由(255字以內)"></textarea></br>

                <div style="margin-left: 510px;">還可以輸入
<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">20</span>個字 </div>  //20爲設置的限定的字數

            </div>
</html>
<script>
    function Q(s) { return document.getElementById(s); }  

function checkWord(c) {
    var maxstrlen = 20;    //20爲設置的限定的字數
    len = maxstrlen;
    var str = c.value;              //對象的內容
    myLen = getStrleng(str);   //計算str的字符個數
    var wck = Q("wordCheck");
    if (myLen > len * 2) {
        c.value = str.substring(0, i - 1);
    } else {
        wck.innerHTML = Math.floor((len * 2 - myLen) / 2);    //Math.floor(x),返回值:小於等於 x,且與 x 最接近的整數
    }                                                                                       //但是Math.floor((5 * 2 - 1) / 2)=4
}

function getStrleng(str) {
    var maxstrlen = 20;  
    myLen = 0;
    i = 0;
    for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)           //根據Unicode編碼值判斷是否漢字
            myLen++;
        else
            myLen += 2;
    }
    return myLen;
}
</script>
放到項目中用的時候只需要改動函數名字和限制的數字即可

二:限制輸入內容的個數,數字,字母,符號,空格,回車等都記爲1

<html>  
   <head>  
   <title>JS限制Textarea文本域字符個數</title>  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
   <SCRIPT LANGUAGE="JavaScript">  
   <!--//  
   function textCounter(field, countfield, maxlimit) {  
   // 函數,3個參數,表單名字,表單域元素名,限制字符;  
   if (field.value.length > maxlimit)  
   //如果元素區字符數大於最大字符數,按照最大字符數截斷;  
   field.value = field.value.substring(0, maxlimit);  
   else  
   //在記數區文本框內顯示剩餘的字符數;  
   countfield.value = maxlimit - field.value.length;  

   }  
   //-->  
   </SCRIPT>  
   </head>  
   <body>  
    <form name=myform action="">  
        <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,6);"
 onKeyUp="textCounter(message,remLen,6);"></textarea>  
        您還可以輸入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">個字符  
    </form>  
   </body>  
   </html> 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章