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

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 事件，以及如何管理该事件，在我的以下示例中，当用户按常规状态下的按键时，我几乎可以进行管理，但如果您开始按住键然后停止并复制和粘贴非常快，事件有点丢失并在第二次按键后恢复。无论如何，这里是我的完整示例，其中包含字符计数器计数，如果您超过最大字符数，则从红色更改为黑色，然后从黑色更改为红色，并验证提交或不是 表单

fiddle : 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 美分