Rumah > Soal Jawab > teks badan
kotak input js mengehadkan bilangan perkataan dalam kotak input, kod berikut
<input type='text' onkeyup="checkNumber($(this))">
function checkNumber($this){
let val=$this.val();
if(val.length > 10 ){
alert('字数超过10');
}
}
Semasa proses sebenar, masalah berikut ditemui, seperti yang ditunjukkan dalam gambar:
Dalam kaedah input, huruf dipaparkan dahulu, dan kemudian pinyin huruf ditukar kepada aksara Cina. Oleh itu, mungkin apabila memasukkan, bilangan huruf ditambah aksara Cina melebihi bilangan aksara yang terhad Bagaimana untuk menyelesaikan masalah?
代言2017-07-05 10:40:10
Anda tidak perlu makluman, cuma tambahkan kotak merah selepas kotak input
给我你的怀抱2017-07-05 10:40:10
Kami membayangkan bahawa input juga dalam bahasa Inggeris atau Cina penuh, dan panjangnya perlu dihadkan kepada kurang daripada 10, maka panjang maksimum="10" diperlukan Fungsi checkNumber kemudian menentukan sama ada input mengandungi aksara Cina, dan jika ya , menentukan sama ada aksara terakhir dalam bahasa Inggeris . Jika tiada penjelasan bahasa Cina dan ia dalam bahasa Inggeris tulen, ia akan menggesa anda untuk menilai kelemahan rancangan jika kedua-dua bahasa Cina dan Inggeris hadir bersama.
ringa_lee2017-07-05 10:40:10
Contoh berikut, saya tertanya-tanya sama ada ia akan membantu anda
<!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>