Javascript – Problem mit der Wortbeschränkung im js-Eingabefeld
高洛峰
高洛峰 2017-07-05 10:38:10
0
6
891

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?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(6)
小葫芦
<input type="text" maxlength="10">
迷茫

oninput="checkNumber($(this))"

代言

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

给我你的怀抱

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

ringa_lee

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

<!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>
曾经蜡笔没有小新

onkeyup事件换成onblur事件解决。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!