JS實時檢測文本框內容長度
阿新 • • 發佈：2017-11-28
文本框 image 文字 type maxlength val input get -s
if (x.getAttribute && x.value.length > nMaxLen) {
x.value = x.value.substring(0, nMaxLen);
}
document.getElementById("Counter").innerHTML = x.value.length;
}
通過js代碼實時監測，文本框內容的變化以及長度，下圖是一個實際使用場景。
HTML部分：
- <input id="Text1" type="text" onkeyup="TmaxLength(this)"/>
- <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,且會涉及到光標位置的問題，下篇文章會寫到光標定位。
JS實時檢測文本框內容長度