js 實現textarea輸入字數提示

時間 2019-12-04

原文原文鏈接

1、先看效果圖
javascript

效果如圖，當輸入文字的時候，提示區域動態的顯示已輸入的字數和最大輸入的字數。很是經常使用的小功能。
2、知識點
知識點比較簡單，爲了兼容性好些，我多用了幾個事件input、propertychange、paste、keyup。如今好多用vue等框架寫，我暫時先用jQuery寫了，緣由是讀者比較好理解，須要其餘方式也便於修改，高手估計也不用看這些東西啦哈哈哈。
3、上代碼。
我當初學習的時候就但願多看demo，可我找到的資料每每是講一些要點，寫一些代碼片斷，因此我儘可能的直接上代碼了。html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-2.1.0.js"></script>
    </head>

    <body>
        <div id="div1">
            <textarea id="text" rows="8" cols="15"></textarea>
            <span></span>
        </div>
        <div id="viewBox">
            <!--這裏是顯示提示的區域-->
        </div>
        <script type="text/javascript">
            LimitedNnumber("#text", "#viewBox", 9)//調用函數須要傳入三個參數，分別爲，輸入框、顯示框、限制的長度（這裏是9）

            function LimitedNnumber(eventBox, viewBox, textLength) {//調用函數須要傳入三個參數，分別爲，輸入框、顯示框、限制的長度
                $(document).on('input propertychange paste keyup', eventBox, function(event) {
                    this.value = this.value.replace(this.value.slice(textLength), "")//超出長度的部分替換爲空
                    $(viewBox).html(this.value.length + "/" + textLength)
                })
            }
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。