多个文本区域的字符计数器

Question

我有一个包含 3 个文本区域、一个复制按钮和一个重置按钮的表单。我想将所有字符加到一个总和中，然后在复制/重置按钮旁边显示该总和。有 500 个字符的限制，计数器应从 49 个字符开始。我是否应该将所有文本区域并将它们“漏斗”到一个var中，然后计算那个var？我不确定我应该如何处理这个问题。我试过this technique

但它只适用于一个文本区域，而不是所有文本区域的总和。如果字符数超过 500，我希望文本变为红色并说“您已超出字符数限制”。一旦超过 500，我不想限制或限制文本。我有点担心试图找到解决方案，而且我是一个明显的 html/javascript 新手。

我不需要担心 Firefox/opera 中的回车问题，因为每个人都会使用 IE11。

<h1>
     Enter your notes into the text boxes below
</h1>

         <p>
           Please avoid using too many abbreviations so others can read your notes. 
    </p>



<form>

    <script type="text/javascript"><!--
    // input field descriptions
    var desc = new Array();
    desc['kcall'] = 'Reason for Call';
    desc['pact'] = 'Actions Taken';
    desc['mrec'] = 'Recommendations';




    function CopyFields(){
        var copytext = '';
        for(var i = 0; i < arguments.length; i++){
        copytext += desc[arguments[i]] + ': ' + document.getElementById (arguments[i]).value + '\n';
    }
    var tempstore = document.getElementById(arguments[0]).value;
    document.getElementById(arguments[0]).value = copytext;
    document.getElementById(arguments[0]).focus();
    document.getElementById(arguments[0]).select();
    document.execCommand('Copy');
    document.getElementById(arguments[0]).value = tempstore;  

   document.getElementById("copytext").reset();

}
    --></script>


<p> Reason For Call: </p> <textarea rows="5" cols="40" id="kcall"></textarea><br>
<p> Actions Taken:   </p> <textarea rows="5" cols="40" id="pact"></textarea><br>
<p> Recommendations: </p> <textarea rows="5" cols="40" id="mrec"></textarea><br>
<br>

<button type="button" onclick="CopyFields('kcall', 'pact', 'mrec');">Copy Notes</button>



    <input type="reset" value="Reset"/>
</form>    

Answer 1

我认为这个问题比您想象的要复杂一些，并且不会导致计算textarea 中的字符数的复杂性，这实际上非常简单。在 jquery 中：

   $("textarea").each(function(index, item){
        sum += $(this).val().length;
    });

问题从 keyup 事件开始，以及您如何管理该事件，在我下面的示例中，当用户按下键时，我几乎可以管理，就像在 regular state 中一样，但是如果您开始按住键然后停止并复制和粘贴非常快，事件会丢失一点，并在第二次按键后恢复。这里的任何方式都是我的完整示例，计数为character counter，如果您over pass 的最大字符数和submit or not 表单的验证，则从红色变为黑色，黑色变为红色

小提琴： https://jsfiddle.net/t535famp/

HTML

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<button class="reset"></button>
You have use <span class="characters"></span> of <span class="max"></span>
<button class="submit">submit</button>

JS

$(function(){

    var counter = 0; //you can initialize it with any number
    var max =  400; //you can change this

    var $characters = $(".characters");
    var $max = $(".max");
    var submit = true;

    $characters.html(counter);
    $(".max").html(max);

    function count(event){

        var characters = $(event.target).val().length;

        $characters.html(counter);

        //sum the textareas
        var sum = 0;
        $("textarea").each(function(index, item){
            sum += $(this).val().length;
        });

        counter = sum;

        if(counter > max) {
            $characters.css({ color : "red" });
            submit = false;
        }else{
            $characters.css({ color : "black" });
            submit = true;
        }
    }

    $(document).on("keyup","textarea",count);

    $(document).on("click",".submit",function(){
        if(submit)
            alert("done");
        else
            alert("you have more characters than " + max);
    });
})

祝我的 2 美分好运

Answer 2

function textareaLength() {
    var charCount = 0;
    Array.prototype.forEach.call(document.querySelectorAll('textarea'), function (textarea) { charCount += textarea.value.length; });
    return charCount;
}

这将返回页面上所有文本区域的计数。如果您只想计算特定文本区域，请将 querySelector 更改为更具体。

一种选择是将 onchange 事件添加到调用如下函数的文本区域：

<script>
    function validate() { 
        if(textareaLength() >= 500) {
            //limit reached
        }
    }


    function textareaLength() {
        var charCount = 0;
        Array.prototype.forEach.call(document.querySelectorAll('textarea'), function (textarea) { charCount += textarea.value.length; });
        return charCount;
    }
</script>
<textarea onchange="validate()"></textarea>
<textarea onchange="validate()"></textarea>
<textarea onchange="validate()"></textarea>

Answer 3

计数

这是一个非常简单的函数：

function TextLength() {
    return Array.prototype.reduce.call(
              document.querySelectorAll('textarea'),
              function(b,a) { return b+a.value.length }, 0);
}

或者使用 ES6：

const TextLength = () => Array.from(document.querySelectorAll('textarea')).reduce((b,a) => b + a.value.length, 0)

要使用这个：

TextLength();

---

改变

现在添加：

Array.prototype.forEach.call(document.querySelectorAll('textarea'), function (e) { e.oninput = TextLength });

再说一遍，ES6：

Array.from(document.querySelectorAll('textarea')).forEach(e => e.oninput = TextLength );

Answer 4

由于按钮与 textarea 元素的表单相同，因此您可以使用按钮的 form 属性获取对表单的引用。您还可以使用 querySelectorAll 获取表单中的所有文本区域元素，然后循环遍历它们，将每个字符中的字符相加。

以下只是统计textarea元素中的字符总数：

<button type="button" onclick="count(this)">Copy Notes</button>

和功能：

function count(el) {
  var tas = el.form.querySelectorAll('textarea');
  var numChars = 0;
  for (var i=0, iLen=tas.length; i<iLen, I++) {
    numChars += tas[i].value.length;
  }
  return numChars;
}

如果你可以依赖 ES5+ 方法，那么你可以这样做：

function count(el) {
  return Array.prototype.reduce.call(el.form.querySelectorAll('textarea'),
    function(numChars, ta){return numChars += ta.value.length}, 0); 
}

请注意，按照惯例，以大写字母开头的函数是为构造函数保留的，因此 CopyFields 应该是 copyFields。

这是一个工作示例：

function count(el) {
  return Array.prototype.reduce.call(el.form.querySelectorAll('textarea'),
    function(numChars, ta){return numChars += ta.value.length}, 0); 
}

<form>

  <textarea name="ta0"></textarea>
  <textarea name="ta1"></textarea>
  <textarea name="ta2"></textarea><br>
  <input type="text" name="numChars">
  <button type="button" onclick="this.form.numChars.value = count(this)">count</button>
  <input type="reset">
</form>

Answer 5

如果您有多个 textarea（多个）并且您想在每个 textarea 上显示字符数，您可以尝试下面的代码，因为它对我来说就像一个魅力。

$(document).ready(function () {
        $('textarea').on("load propertychange keyup input paste",
        function () {     
            var cc = $(this).val().length;
            var id=$(this,'textarea').attr('id');
            $('#'+id).next('p').text('character Count: '+cc); 
        });
      
      $('textarea').trigger('load');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="one">hello</textarea>
<p></p>
<textarea id="two"></textarea>
<p></p>
<textarea id="three"></textarea>
<p></p>