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

來源:互聯網
上載者:User

對於單行文字框,我們可以通過設定屬性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);
    }
}

代碼下載

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.