兼顧pc和移動端的textarea字數監控的實現方法

時間 2019-12-11
原文原文鏈接
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
        <title>兼顧pc和移動端的textarea字數監控的實現方法demo</title>
        <!--
    具體講解參考這篇文章：
    https://blog.csdn.net/Hferje/article/details/78873415 -->
        <!-- <script src="jquery-1.11.3.js"></script> -->
    </head>

    <body>
        <h3>以前的作法</h3>
        <div class="form-group needCount">
            <textarea id="txt" maxlength="10"></textarea>
            <p><span id="txtNum">0</span>/10</p>
        </div>
        <hr>
        <h3>改進後並實現複用</h3>
        <div class="form-group needCount">
            <textarea id="txt0" maxlength="10" onfocus="ff(0)"></textarea>
            <p><span id="txtNum0">0</span>/10</p>
        </div>
        <div class="form-group needCount">
            <textarea id="txt1" maxlength="10" onfocus="ff(1)"></textarea>
            <p><span id="txtNum1">0</span>/10</p>
        </div>
        <div class="form-group needCount">
            <textarea id="txt2" maxlength="10" onfocus="ff(2)"></textarea>
            <p><span id="txtNum2">0</span>/10</p>
        </div>
        <!-- <div class="form-group needCount">        
        <textarea id="txt3" maxlength="10" onfocus="ff(3)"></textarea>
        <p><span id="txtNum3">0</span>/10</p>
    </div> -->
        <script>
            /*以前的作法*/
            var otxt = document.getElementById("txt");
            var otxtNum = document.getElementById("txtNum");
            otxt.addEventListener("keyup", function() {
                otxtNum.textContent = otxt.value.length;
            });

            /*單個控件*/
            // var txt0 = document.getElementById("txt0");
            // var txtNum0 = document.getElementById("txtNum0");
            // var chnIpt0 = false;

            // txt0.addEventListener("keyup",function(){
            //     if(chnIpt0 ==false){
            //         countTxt();
            //     }
            // });
            // txt0.addEventListener("compositionstart",function(){
            //     chnIpt0 = true;
            // })
            // txt0.addEventListener("compositionend",function(){
            //     chnIpt0 = false;
            //     countTxt();
            // })
            // function countTxt(){
            //     if(chnIpt0 == false){
            //         txtNum0.textContent = txt0.value.length;
            //     }
            // }

            /*複用原理*/
            // var txt0 = document.getElementById("txt0");
            // var txt1 = document.getElementById("txt1");
            // var txt2 = document.getElementById("txt2");

            // var txtNum0 = document.getElementById("txtNum0");
            // var txtNum1 = document.getElementById("txtNum1");
            // var txtNum2 = document.getElementById("txtNum2");

            // var chnIpt0 = false;
            // var chnIpt1 = false;
            // var chnIpt2 = false;

            // var txt=[txt0,txt1,txt2];
            // var txtNum=[txtNum0,txtNum1,txtNum2];
            // var chnIpt=[chnIpt0,chnIpt1,chnIpt2];

            /*優化建立數組*/
            var txt = [],
                txtNum = [],
                chnIpt = [];
            var needCount = document.getElementsByClassName("needCount");
            console.log(needCount.length)

            for(var i = 0; i < needCount.length; i++) {
                txt[i] = document.getElementById("txt" + i);
                txtNum[i] = document.getElementById("txtNum" + i);
                chnIpt[i] = false;
            }
            /*focus方法傳入索引值調用相應的組件*/
            function ff(i) {
                txt[i].addEventListener("keyup", function() {
                    // console.log("keyup");
                    if(chnIpt[i] == false) {
                        txtNum[i].textContent = txt[i].value.length;
                    }
                });
                txt[i].addEventListener("compositionstart", function() {
                    // console.log("compositionstart");
                    chnIpt[i] = true;
                });
                txt[i].addEventListener("compositionend", function() {
                    // console.log("compositionend");
                    chnIpt[i] = false;
                    txtNum[i].textContent = txt[i].value.length;
                });
            }
        </script>
    </body>

</html>