Cipta papan kekunci maya Jquery yang diperibadikan dan berkuasa (VirtualKeyboard)_jquery

Dalam projek baru-baru ini, saya bertanggungjawab ke atas bahagian hadapan halaman web Pelanggan perlu menggunakan skrin sentuh untuk operasi, tanpa tetikus dan papan kekunci luaran, tetapi dikehendaki boleh memasukkan teks, termasuk. nombor, Inggeris dan Cina. Selepas memikirkannya, saya memutuskan untuk menggunakan JS untuk melaksanakan papan kekunci maya.

Pertama sekali, saya mencari papan kekunci maya JS di Internet Selepas pemeriksaan yang teliti, saya jatuh cinta dengan VirtualKeyboard, pemalam papan kekunci maya JS yang berkuasa.

Mari perkenalkan secara ringkas VirtualKeyboard Ia mempunyai lebih daripada 100 susun atur papan kekunci terbina dalam, lebih daripada 200 kaedah input, 9 set pelan kulit pilihan, dan menyokong kaedah input binaan sendiri.

Lampirkan alamat muat turun dahulu Versi terkini ialah 3.94: http://www.corallosoftware.it/Download/download.html Tutorial ini menggunakan 3.71 dan tidak menyediakan muat turun yang berasingan memerlukannya boleh memuat turun versi ubah suai saya di penghujung artikel

Selepas memuat turun, lihat dokumen tunjuk caranya dahulu, kemudian buka Jsvkjscriptsdemo_inline.html Anda dapat melihat bahawa papan kekunci maya agak cantik dan menyokong input pinyin Cina, yang benar-benar selaras dengan jangkaan. Seperti yang ditunjukkan di bawah:

Sepadukan ke dalam projek dan lakukan sahaja!

Mula-mula, salin fail dalam direktori Jsvkjscripts ke projek Fail teks dan fail demonstrasi html boleh dipadamkan.

Fail JS dirujuk dalam halaman projek:

Salin kod Kod adalah seperti berikut:

Terangkan: vk_layout=CN Chinese Simpl. Pinyin bermaksud kaedah input lalai ditetapkan kepada Bahasa Cina Ringkas,

vk_skin=flat_gray bermaksud flat_gray dipilih sebagai kulit lalai. Kedua-dua ini boleh ditetapkan mengikut keperluan peribadi.

Fungsi untuk memanggil/menyembunyikan papan kekunci maya:

VirtualKeyboard.toggle("txt_Search", "softkey");
txt_Search ialah ID kotak teks dan kekunci lembut ialah ID elemen tempat papan kekunci maya dipaparkan.

Berikut ialah contoh mudah:

Salin kod Kod adalah seperti berikut:

​​


                                                                                                                                                                                                                                                                                                                            
 

Kesan:

Sesuaikan fungsi yang anda perlukan langkah demi langkah

Fungsi asas telah dilaksanakan, dan langkah seterusnya ialah menukar antara bahasa Cina dan Inggeris. Mula-mula klik CapsLock untuk bertukar kepada huruf besar dan mencuba, tetapi hasilnya mengecewakan Apabila menukar kepada huruf besar dalam mod Cina, input masih dalam bahasa Cina. Anda hanya boleh mengklik pada menu pemilihan kaedah input di penjuru kanan sebelah bawah, cari AS dan beralih kepada kaedah input bahasa Inggeris. Ini tidak mungkin. Anda perlu bertukar-tukar antara ratusan pilihan setiap kali.

Jadi, saya mempunyai idea awal, mengosongkan senarai lungsur dan membina senarai secara manual dengan pilihan bahasa Cina dan Inggeris sahaja. Untuk mengosongkan senarai drop-down, anda mesti terlebih dahulu mengetahui IDnya Lapisan jenis ini biasanya dibuat secara dinamik, jadi saya menemui Jsvkjscriptsvirtualkeyboard.js dan membukanya, seperti yang dijangkakan, kod itu dimampatkan dan boleh dibaca secara langsung. Jadi kita perlu menyahmampatnya terlebih dahulu. Buka http://jsbeautifier.org/, salin kod dalam fail JS ke dalam kotak input, klik butang dan penyahmampatan selesai. ctrl a, ctrl c untuk menyalin ke fail JS baharu, OK, anda boleh membacanya. Cari kata kunci "

"" ""
kb_mappingselector ialah ID kotak pemilihan susun atur papan kekunci, kb_langselector ialah ID kotak pemilihan kaedah input dan kb_langselector ialah ID yang kita inginkan.

Dengan ID, ia boleh diubah suai Kerana ia dicipta secara dinamik, IDnya hanya boleh diperolehi selepas penciptaan selesai, jadi saya menulis kod selepas papan kekunci maya dimuatkan.

Kod berikut menggunakan rangka kerja JQuery dan perlu dirujuk sebelum ia boleh digunakan secara normal.

Salin kod Kod adalah seperti berikut:

ujian fungsi(){
$("#kb_langselector").kosong().append("Bahasa Inggeris中文 VirtualKeyboard.switchLayout(this.value);return false;
});
}

Selepas ujian, saya menemui masalah Pemuatan berhenti pada 10%, dan halaman tersebut menyebabkan ralat JS.

Daripada penerangan ralat, saya mungkin meneka bahawa terdapat masalah dengan pilihan yang saya bina, tetapi saya tidak dapat mencari masalah khusus selepas beberapa jejak dan penyahpepijatan Jika mana-mana wira menemui ralat itu, saya harap anda dapat memberi pencerahan kepada saya !

Jika anda menghadapi ralat yang tidak dapat anda selesaikan untuk masa yang lama, ubah pemikiran anda!

Idea awal gagal, jadi saya berubah fikiran Memandangkan ada sesuatu yang salah dengan apa yang saya bina, saya tidak akan membinanya sendiri, tetapi saya tidak memerlukan bahan tambahan.

Mengikuti idea ini, saya mengkaji semula kod pemuatan dan mendapati bahawa JS yang dimuatkan oleh kaedah input ditakrifkan dalam Jsvkjscriptslayoutslayouts.js. Jadi saya dengan tegas memadamkan pilihan yang berlebihan, hanya meninggalkan dua pilihan: Chinese Simpl dan US. Penyampaian selepas pengubahsuaian adalah seperti berikut. Hanya terdapat dua pilihan: Bahasa Cina dan Bahasa Inggeris, yang lebih bersih.

Ini bukan yang saya mahu!

Bertukar antara bahasa Cina dan bahasa Inggeris telah dilaksanakan, tetapi operasinya tidak cukup mudah. ​​Apa yang saya perlukan ialah penukaran satu klik.

Mula-mula cari fail kulit, Jsvkjscriptscssflat_graybutton_set.png, saya mahu menambah butang sendiri!

Gambar asal:

Selepas pengubahsuaian:

Hanya menukar gambar pastinya tidak mencukupi. Butang diletakkan dalam helaian gaya dan terus mengubah suai helaian gaya! Tambahkan kod berikut pada penghujung helaian gaya Jsvkjscriptscssflat_graykeyboard.css.

Salin kod Kod adalah seperti berikut:

#kbDesk div#kb_binput_method {
terapung: betul;
Lebar: 102px;
}
#kbDesk div#kb_binput_method a {
        kedudukan latar belakang: -453px 0px;
}
#kbDesk div#kb_binput_method.kbButtonHover a {
        kedudukan latar belakang: -453px -38px;
}
#kbDesk div#kb_binput_method.kbButtonDown a {
        kedudukan latar belakang: -453px -76px;
}

Seterusnya, anda perlu menentukan acara untuk butang dalam fail JS. Buka virtualkeyboard.js dan cari

Salin kod Kod adalah seperti berikut:

var C = {
14: 'ruang belakang',
15: 'tab',
28: 'masuk',
29: 'topi',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'ruang',
57: 'alt_right',
58: 'ctrl_right'
};

Tambah 59: 'kaedah_input' di bawah, ingat untuk menambah koma selepas 'ctrl_right'. Selepas pengubahsuaian:

Salin kod Kod adalah seperti berikut:

var C = {
14: 'ruang belakang',
15: 'tab',
28: 'masuk',
29: 'topi',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'ruang',
57: 'alt_right',
58: 'ctrl_right',
59: 'kaedah_masukan'
};

Teruskan mencari kod respons klik butang:

Salin kod Kod adalah seperti berikut:

var d = fungsi (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        jika (!e || e.parentNode.id.indexOf(Q) < 0) kembali;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        suis (il) {
            "topi" kes:
                iI = iI ^ s;
                rehat;
            kes "shift_left":
            kes "shift_right":
                jika (i.shiftKey) putus;
                iI = iI ^ Z;
                rehat;
            kes "alt_left":
            kes "alt_right":
            kes "ctrl_left":
            kes "ctrl_right":
                iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
                rehat;
            lalai:
                jika (_) DOM.CSS(e).addClass(y.buttonDown);
                putus
        }
        jika (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };

　　修改为：

复制代码 代码如下:

var d = fungsi (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        jika (!e || e.parentNode.id.indexOf(Q) < 0) kembali;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        suis (il) {
            "topi" kes:
                iI = iI ^ s;
                rehat;
            kes "kaedah_masukan":
                if (document.getElementById("kb_langselector").value == 'AS US') {
                    VirtualKeyboard.switchLayout("CN Chinese Simpl. Pinyin");

                }
                lain {
                    VirtualKeyboard.switchLayout("AS AS");

                }
                rehat;
            kes "shift_left":
            kes "shift_right":
                jika (i.shiftKey) putus;
                iI = iI ^ Z;
                rehat;
            kes "alt_left":
            kes "alt_right":
            kes "ctrl_left":
            kes "ctrl_right":
                iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
                rehat;
            lalai:
                jika (_) DOM.CSS(e).addClass(y.buttonDown);
                putus
        }
        jika (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };

　　既然有了按钮，就不需要显示下面的下拉框了，所以，给它隐藏掉！

　　OK，大功告成！看下效果图

　　外观和功能搞定了，但一看它的文件夹，足足7M多，精简！精简过程就不一程就王🎜>

　　写了这么多，谢谢你能把它看完，最后放上全部修改精简完成乐后的！

http://www.jb51.net/jiaoben/228716.html