<!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>