javascript - Problème de limite de mots dans la zone de saisie js
高洛峰
高洛峰 2017-07-05 10:38:10
0
6
980

la zone de saisie js limite le nombre de mots dans la zone de saisie, le code suivant

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

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

Au cours du processus, les problèmes suivants ont été détectés, comme le montre l'image :

Dans la méthode de saisie, les lettres sont affichées en premier, puis le pinyin des lettres est converti en caractères chinois. Par conséquent, il se peut que lors de la saisie, le nombre de lettres et de caractères chinois dépasse le nombre limité de caractères. Comment résoudre le problème ?

高洛峰
高洛峰

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

répondre à tous(6)
小葫芦
<input type="text" maxlength="10">
迷茫

oninput="checkNumber($(this))"

代言

Vous n'avez pas besoin d'alerte, ajoutez simplement une case rouge après la zone de saisie

给我你的怀抱

Nous imaginons que l'entrée est également en anglais complet ou en chinois, et que la longueur doit être limitée à moins de 10, alors maxlength="10" est requis. La fonction checkNumber détermine ensuite si l'entrée contient des caractères chinois, et si c'est le cas. , détermine si le dernier caractère est en anglais. S'il n'y a pas d'explication en chinois et qu'elle est en anglais pur, cela vous demandera. Il sera difficile de juger des lacunes du plan si le chinois et l'anglais sont présents ensemble.

ringa_lee

L'exemple suivant, je me demande si cela va vous aider

<!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事件解决。

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal