對於單行文字框,我們可以通過設定屬性maxlength來限制可輸入的最多字元數:
<input type="text" maxlength="5" />對於多行文字框,如果想限制最多可輸入字元數,必須使用Javascript指令碼來達到目的。
1. 最初的解決方案:<textarea rows="4" cols="20" onkeydown="return maxlength(this, 5);"></textarea> function maxlength(node, maxcount) {
if (node.value.length >= maxcount) {
return false;
}
return true;
} 上面的解決辦法雖然能夠限制最多可輸入字元數為 5 個,但是當已經輸入 5 個字元後,就不會響應任何的鍵盤操作了,這將會惹惱那些想通過“Delete”或“Backspace”按鍵修改字串的使用者。
2. 改進的解決方案:<textarea rows="4" cols="20" onkeydown="return maxlength2(event, 5);"></textarea> function maxlength2(event, maxcount) {
// 以下三步操作是為了相容FF和IE
var event = event || window.event;
var target = event.target || event.srcElement;
var keyCode = event.charCode || event.keyCode;
// 8 - backspace , 46 - delete
if (keyCode != 8 && keyCode != 46) {
if (target.value.length >= maxcount) {
return false;
}
}
return true;
}雖然這樣可以滿足一定的需求,但是如果使用者在輸入最大字元後想按“Enter”等按鍵呢。考慮到onkeydown是在鍵盤按下,但是文字尚未輸入文字框中,而onkeyup時文字已經輸入文字框,所以我們可以先允許使用者輸入,然後進行字串截斷的策略。
3. 先輸入字元後截斷字元的解決辦法:<textarea rows="4" cols="20" onkeyup="return maxlength3(this, 5);"></textarea>
function maxlength3(node, maxcount) {
if (node.value.length > maxcount) {
node.value = node.value.substr(0, maxcount);
}
}
代碼下載