在输入值之前不会显示最大长度，并且在 Backspacing 之后它会减少到 31 个字符

问题描述

Max length 的值在加载时为 30，所有字符退格后为 30。

<input onkeypress="chars(),maxLen()" onkeydown="back()" maxlength="30" type="text" placeholder="Title....." id="inpuT1" class="input">
<br>
Max Length <span id="chars"></span>
 

此外，我必须在中途给出两个输入或两个退格来更改值。我需要它就像 Stackoverflow 问题框一样，上面写着“x”个字符。

//Maximum input length
document.getElementById("chars").innerHTML=result;
function chars(){
var inputValue = document.getElementById("inpuT1").value;
var textnode = document.createTextNode(inputValue);
var maxlen = 30;
var result;
result=maxlen-textnode.length;
document.getElementById("chars").innerHTML=result;
}

//Key down
function back(){
  var inputValue = document.getElementById("inpuT1").value;
  var textnode = document.createTextNode(inputValue);
  var maxlen=30;
  var result;
    result=maxlen-textnode.length;
    document.getElementById("chars").innerHTML=result+1;
}

//Maximum input length
function maxLen(){ 
var inputValue = document.getElementById("inpuT1").value;
var textnode = document.createTextNode(inputValue);
  if(textnode.length>29){
   alert("Max Length reached !!!");
  }
}

解决方法

inpuT1.addEventListener(
  'keyup',({ target: { value: { length } } }) => {
     console.log(length)
     chars.innerText = 30 - length
   }
)

<input maxlength="30" type="text" placeholder="Title....." id="inpuT1" class="input">
<br>
Characters left: <span id="chars"></span>