Question

我有一个包含3个文本区域的表单，一个复制按钮和一个重置按钮。我想将所有字符添加到一个总和，然后在复制/重置按钮旁边显示该总和。有500个字符的限制，计数器应从49个字符开始。我应该把我所有的textareas和＆＃34;漏斗＆＃34;将它们变成var，然后计算var？我不知道该如何处理这个问题。我试过this technique

但它只适用于一个文本区域，而不是所有文本区域的总和。如果字数超过500，我希望文字变成红色并说“＃34;你已经超过了你的角色限制。”＃34;我不想限制或限制文本超过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;
    });

问题从以后的关键事件开始，以及你如何管理该事件，在我的例子中，我几乎管理用户按下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;
}

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

一个选项是将onchange事件添加到textareas，调用如下函数：

<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

如果您有多个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>

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

3 个答案: