suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript – Problem mit der Wortbeschränkung im js-Eingabefeld

js Eingabefeld begrenzt die Anzahl der Wörter im Eingabefeld, der folgende Code

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

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

Während des eigentlichen Prozesses wurden folgende Probleme festgestellt, wie im Bild dargestellt:

Bei der Eingabemethode werden zuerst die Buchstaben angezeigt und dann das Pinyin der Buchstaben in chinesische Schriftzeichen umgewandelt. Daher kann es sein, dass bei der Eingabe die Anzahl der Buchstaben plus chinesischer Zeichen die begrenzte Anzahl an Zeichen überschreitet. Wie kann das Problem gelöst werden?

高洛峰高洛峰2783 Tage vor990

Antworte allen(6)Ich werde antworten

  • 高洛峰

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

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

    Antwort
    0
  • 迷茫

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

    oninput="checkNumber($(this))"

    Antwort
    0
  • 代言

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

    你不用alert,用输入框后面加红框的形式就可以了

    Antwort
    0
  • 给我你的怀抱

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

    我们设想下,input也输入全英文的、或者中文,需要限定长度小于10,那么maxlength="10"是需要的,checkNumber函数然后判断是否input有存在中文,有的话判断最后字符是否是英文。如果没有中文说明说纯英文就提示,这样方案不足之处有中文和英文一起存在不好判断。

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

    Antwort
    0
  • 曾经蜡笔没有小新

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

    onkeyup事件换成onblur事件解决。

    Antwort
    0
  • StornierenAntwort