textarea实时字符计数+预览不起作用[重复]答案

【问题标题】：textarea live character counting + Preview not working [duplicate]textarea实时字符计数+预览不起作用[重复]
【发布时间】：2018-01-30 18:14:23
【问题描述】：

我正在尝试获取文本区域的实时字符数 + 实时预览，使用纯 JS 没有 Jquery，但出现了一些错误。这是我的代码

var wpcomment = document.getElementById('text');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('DrevCom').innerHTML = this.value;
}
function count()
{
  var total=document.getElementById("text").value;
  total=total.replace(/\s/g, '');
  document.getElementById("total").innerHTML="Total Characters:"+total.length;
}

<textarea id="text" onkeyup="count();"  placeholder="Add comments:"></textarea>



<p id="total">Total Characters:0</p>
<div id="DrevCom"></div>

【问题讨论】：

没有看到任何错误 - 你看到了什么错误？从外观上看，您永远不会打电话给count。
它可以很好地显示预览但不显示字符数
是的，你从来没有像我提到的那样打电话给count。
你能帮我修一下吗，我试了太多次了！

标签： javascript html

【解决方案1】：

您将 HTML 中的 onkeyup 属性设置为 count()，然后用 Javascript 覆盖它。您只能拥有一个onKeyup 属性，因此要么改用event listener，要么让一个函数调用另一个函数。

var wpcomment = document.getElementById('text');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('DrevCom').innerHTML = this.value;
    count()
}
function count()
{
  var total=document.getElementById("text").value;
  total=total.replace(/\s/g, '');
  console.log(total);
  document.getElementById("total").innerHTML="Total Characters:"+total.length;
}

<textarea id="text"  placeholder="Add comments:"></textarea>



<p id="total">Total Characters:0</p>
<div id="DrevCom"></div>

【讨论】：

只有一个事件侦听器应该是可行的方法，然后您可以根据需要将该侦听器中的代码拆分为多个函数。
啊！我错过了！谢谢