亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Javascript限制多行文本輸入框的字符數

標簽:
JavaScript

对于单行文本框,我们可以通过设置属性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);
    }
}

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消