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實時檢測文本框內容長度