js输入框限定字数问题

发布于
2017-07-03

js输入框限定输入框的字数，以下代码

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

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

在实际过程中，发现以下问题，如图：
图片描述

在输入法中是，先显示字母，再将字母拼音转换成汉字。故可能在输入的时候，字母加汉字已超过限定的字数，该如何解决？

javascript

阅读 6k

6 个回答

得票最新

yulingsong

21621120

发布于
2017-07-03

<input type="text" maxlength="10">

caryhgq

3.5k65484

发布于
2017-07-04

下面这个例子，不知会不会帮到你

<!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>