js文本框字數限制

時間 2019-12-04

原文原文鏈接

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>textarea還剩餘字數統計</title>

    <style type="text/css">

        body,a{ font-size: 14px; color: #555;;}

        .wordCount{ position:relative;width: 600px; }

        .wordCount textarea{ width: 100%; height: 100px;}

        .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}

        .wordCount .word{ color: red; padding: 0 4px;;}

    </style>

</head>

<body>

<h1>textarea還剩餘字數統計</h1>



<p>textarea還剩餘字數統計，支持複製粘貼的時候統計字數</p>



<div class="wordCount" id="wordCount">

    <textarea placeholder="textarea還剩餘字數統計"></textarea>

    <span class="wordwrap"><var class="word">200</var>/200</span>

</div>





<span id="clock"></span>

<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

<script>

    $(function(){



        //先選出 textarea 和 統計字數 dom 節點

        var wordCount = $("#wordCount"),

            textArea = wordCount.find("textarea"),

            word = wordCount.find(".word");

        //調用

        statInputNum(textArea,word);



    });

    /*

    * 剩餘字數統計

    * 注意 最大字數只須要在放數字的節點哪裏直接寫好便可 如：<var class="word">200</var>

    */

    function statInputNum(textArea,numItem) {

        var max = numItem.text(),

            curLength;

        textArea[0].setAttribute("maxlength", max);

        curLength = textArea.val().length;

        numItem.text(max - curLength);

        textArea.on('input propertychange', function () {

            numItem.text(max - $(this).val().length);

        });

    }

</script>

</body>

</html>