- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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 ?
代言2017-07-05 10:40:10
Vous n'avez pas besoin d'alerte, ajoutez simplement une case rouge après la zone de saisie
给我你的怀抱2017-07-05 10:40:10
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_lee2017-07-05 10:40:10
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>