Question

我正在努力获得一个textarea纯正的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>

Answer 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>

textarea live character counting +预览不起作用

1 个答案: