我的表单有 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>
最佳答案
我认为这个问题比您想象的要棘手一些,并不是因为计算 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 美分
关于javascript - 多个文本区域的字符计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32193007/