JS实时检测文本框内容长度

Posted 2020-10-16

 

 

 

通过js代码实时监测，文本框内容的变化以及长度，下图是一个实际使用场景。

 

　　

html部分：

1. <input id="Text1" type="text" onkeyup="TmaxLength(this)"/>
   
2. <span id="Counter" style="color: red;">0</span>  

JS部分

　　//实时更新输入框文字长度
　　function TmaxLength(x) {
　　　　//x.getAttribute是判断是否为DOM结构
　　　　var nMaxLen = x.getAttribute ? parseInt(x.getAttribute("maxlength")) : "";
　　　　if (x.getAttribute && x.value.length > nMaxLen) {
　　　　x.value = x.value.substring(0, nMaxLen);
　　}
　　　　document.getElementById("Counter").innerHTML = x.value.length;
　　}

　　*注意：对于可编辑div的话，不能用value属性，改为innerText,且会涉及到光标位置的问题，下篇文章会写到光标定位。