首頁  >  問答  >  主體

javascript - js輸入框限定字數問題

js輸入框限定輸入框的字數,以下程式碼

<input type='text' onkeyup="checkNumber($(this))">

function checkNumber($this){
    let val=$this.val();
    if(val.length > 10 ){
        alert('字数超过10');
    }
}

在實際過程中,發現以下問題,如圖:

在輸入法中是,先顯示字母,再將字母拼音轉換成漢字。故可能在輸入的時候,字母加漢字已超過限定的字數,該如何解?

高洛峰高洛峰2680 天前906

全部回覆(6)我來回復

  • 高洛峰

    高洛峰2017-07-05 10:40:10

    雷雷

    回覆
    0
  • 迷茫

    迷茫2017-07-05 10:40:10

    oninput="checkNumber($(this))"

    回覆
    0
  • 代言

    代言2017-07-05 10:40:10

    你不用alert,用輸入框後面加紅框的形式就可以了

    回覆
    0
  • 给我你的怀抱

    给我你的怀抱2017-07-05 10:40:10

    我們設想下,input也輸入全英文的、或者中文,需要限定長度小於10,那麼maxlength="10"是需要的,checkNumber函數然後判斷是否input有存在中文,有的話判斷最後字符是否是英文。如果沒有中文說明說純英文就提示,這樣方案不足之處有中文和英文一起存在不好判斷。

    回覆
    0
  • ringa_lee

    ringa_lee2017-07-05 10:40:10

    下面這個例子,不知會不會幫你

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input 事件兼容处理以及中文输入法优化</title>
    </head>
    <body>
        <input type='text'>
        <script>
            var input = document.querySelector('input');
            var isLock = false;
            //当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.
            input.addEventListener('compositionstart', function(){
                isLock = true;
            })
            //当浏览器是直接的文字输入时, compositionend会以同步模式触发.
            input.addEventListener('compositionend', function(){
                isLock = false;
            });
            input.addEventListener('input',function(e){
                if(!isLock)console.log(this.value);
            });
        </script>
    </body>
    </html>

    回覆
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-05 10:40:10

    onkeyup事件換成onblur事件解決。

    回覆
    0
  • 取消回覆