javascript - masalah had perkataan kotak input js
高洛峰
高洛峰 2017-07-05 10:38:10
0
6
922

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?

高洛峰
高洛峰

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

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

oninput="checkNumber($(this))"

代言

Anda tidak perlu makluman, cuma tambahkan kotak merah selepas kotak input

给我你的怀抱

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_lee

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

onkeyup事件换成onblur事件解决。

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan