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

Question

The value of Max length is to be 30 when loaded, and again 30 after backspacing all characters.

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

Also I have to give two inputs or two backspaces halfway to change the value. I need it to just be like the Stackoverflow question box where it says 'x' characters left.

//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 !!!");
  }
}

Answer 1

 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>