简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - masalah had perkataan kotak input js
高洛峰
高洛峰 2017-07-05 10:38:10
0
6
892

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)
小葫芦
小葫芦2017-07-05 10:40:10 Tingkat 6 
<input type="text" maxlength="10">
Suka +0
Tambah Balasan
迷茫
迷茫2017-07-05 10:40:10 Tingkat 5

oninput="checkNumber($(this))"

Suka +0
Tambah Balasan
代言
代言2017-07-05 10:40:10 Tingkat 4

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

Suka +0
Tambah Balasan
给我你的怀抱
给我你的怀抱2017-07-05 10:40:10 Tingkat 3

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.

Suka +0
Tambah Balasan
ringa_lee
ringa_lee2017-07-05 10:40:10 Tingkat 2

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>
Suka +0
Tambah Balasan
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-05 10:40:10 Tingkat 1

onkeyup事件换成onblur事件解决。

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！