jQuery實現還能輸入N字元

標籤：jquery實現特效   限制輸入字元個數   

頁面：

<table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td>
                                <textarea name="" id="doc" cols="30" rows="10"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="face">
                                    <img src="/sitecn/images/face.jpg" /></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                還能輸入<span id="count"></span>字
                                <input type="button" class="btn" value="提 交" />
                            </td>
                        </tr>
                    </table>

JQuery:

<script type="text/javascript">
    var maxCount = 200;  // 最高字數，這個值可以自己配置

    $("#doc").keyup(function () {
        var len = getStrLength(this.value);
        var lenCount = maxCount - len; //計算還可以輸入多少個
        if (lenCount <0) {
            $(this).val($(this).val().substring(0, 200));
        }
        else {

            $("#count").html(lenCount);
        }
    })

    // 中文字元判斷

    function getStrLength(str) {

        var len = str.length;

        var reLen = 0;

        for (var i = 0; i < len; i++) {

            if (str.charCodeAt(i) < 27 || str.charCodeAt(i) > 126) {

                // 全形     

                reLen += 2;

            } else {
                reLen++;
            }
        }

        return reLen;

    }
</script>

jQuery實現還能輸入N字元