Inti dari skrip, yang akan kami pertimbangkan lebih lanjut, adalah untuk menangkap tindakan pengunjung dengan cepat dan melarangnya memasukkan apa pun di bidang tertentu, kecuali angka. Artinya, ketika kursor terfokus pada bidang, ketika Anda mencoba menekan huruf pada keyboard, tidak ada yang terjadi di bidang, pada saat yang sama Anda dapat memasukkan angka dan beberapa simbol, seperti + - () dan sebagainya aktif, yang mungkin diperlukan untuk bidang nomor telepon atau digital lainnya.
Agar skrip ini berfungsi, pertama-tama Anda memerlukan bidang untuk memasukkan nomor. Misalnya, Anda memiliki bidang di dalam formulir yang terlihat seperti ini:
Skrip pertama menggunakan - jQuery, jadi di header situs Anda sebelum ditutup kepala atau di ruang bawah tanah sebelum ditutup tubuh perlu menambahkan koneksi perpustakaan jQuery. Jika Anda melakukannya atau sistem manajemen situs (site engine) melakukannya, maka Anda tidak perlu melakukan ini. Anda dapat melihat sumber situs dan jika di suatu tempat ada baris yang sama, maka langkah ini harus dilewati. Jika tidak ada koneksi, maka Anda perlu menambahkan baris berikut:
Sekarang giliran script itu sendiri. Kami menambahkannya ke file terpisah dan hubungkan setelah perpustakaan atau bungkus dalam tag:
Nah, kode itu sendiri:
jQuery(document).ready(function($)( $.fn.forceNumbericOnly = function() ( kembalikan this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode | | e.keyCode || 0; kembali (kunci == 8 || kunci == 9 || kunci == 46 ||(kunci >= 37 && kunci<= 40) ||(key >= 48 && kunci<= 57) ||(key >= 96 && kunci<= 105) || key == 107 || key == 109 || key == 173|| key == 61); }); }); }; $("#tel").forceNumbericOnly(); });
Script dipicu oleh penekanan tombol. Baris 8 berisi kode tombol-tombol yang dapat ditekan dan nilainya akan muncul di bidang input. Misalnya, kode pertama adalah 8. Ini adalah kode untuk tombol Backspace, yaitu kode yang menghapus apa yang tertulis. Kode yang diperlukan dapat ditemukan pada tabel di bawah artikel. Di baris kedua dari belakang, tentukan ID bidang input yang diinginkan. Dalam kasus kami, ID adalah #tel, dalam contoh dengan bidang input, ini terlihat jelas.
Kode kedua dalam javascript murni dan sedikit berbeda. Ini memungkinkan Anda untuk memasukkan hanya angka dan spasi mundur, masuk, panah mundur, maju. Tentu saja, Anda dapat menambahkan kode baru untuk memperluas kemungkinan. ID bidang yang diperlukan ditentukan di baris pertama. Nah, kode sebenarnya:
Secara pribadi, saya menggunakan kode pertama, lebih nyaman bagi saya. Yang mana yang Anda pilih terserah Anda.
Itu saja, terima kasih atas perhatian Anda.
Tabel kode kunci virtual untuk javascript, yang dijanjikan di atas.
|
Kunci |
kode ke 10 |
Kunci |
kode ke 10 |
| menghapus | 8 | ||
| tab | 9 | Memasuki | 13 |
| Menggeser | 16 | ctrl | 17 |
| alt | 18 | Berhenti sebentar | 19 |
| kunci huruf kapital | 20 | ESC | 27 |
| ruang angkasa | 32 | PageUp | 33 |
| Halaman bawah | 34 | akhir | 35 |
| Rumah | 36 | panah kiri | 37 |
| panah atas | 38 | panah kanan | 39 |
| panah ke bawah | 40 | Memasukkan | 45 |
| Menghapus | 46 | 0 | 48 |
| 1 | 49 | 2 | 50 |
| 3 | 51 | 4 | 52 |
| 5 | 53 | 6 | 54 |
| 7 | 55 | 8 | 56 |
| 9 | 57 | SEBUAH | 65 |
| B | 66 | C | 67 |
| 68 | E | 69 | |
| F | 70 | G | 71 |
| H | 72 | Saya | 73 |
| J | 74 | K | 75 |
| L | 76 | M | 77 |
| N | 78 | HAI | 79 |
| P | 80 | Q | 81 |
| R | 82 | S | 83 |
| T | 84 | kamu | 85 |
| V | 86 | W | 87 |
| X | 88 | kamu | 89 |
| Z | 90 | kiri tombol Windows | 91 |
| tombol Windows kanan | 92 | Kunci aplikasi | 93 |
| Nomor 0 | 96 | Nomor 1 | 97 |
| Nomor 2 | 98 | Papan Angka 3 | 99 |
| Papan Angka 4 | 100 | Nomor 5 | 101 |
| Papan Angka 6 | 102 | Papan Angka 7 | 103 |
| Papan Angka 8 | 104 | Papan Angka 9 | 105 |
| Papan Angka* | 106 | Papan Angka + | 107 |
| Papan Angka- | 109 | Papan angka. | 110 |
| Papan Angka / | 111 | F1 | 112 |
| F2 | 113 | F3 | 114 |
| F4 | 115 | F5 | 116 |
| F6 | 117 | F7 | 118 |
| F8 | 119 | F9 | 120 |
| F10 | 121 | F11 | 122 |
| F12 | 123 | Kunci Angka | 144 |
| kunci gulir | 145 | Layar Cetak | 154 |
| Meta | 157 | ; | 186 |
| = | 187 | , | 188 |
| - | 189 | . | 190 |
| / | 191 | ~ | 192 |
| [ | 219 | \ | 220 |
| ] | 221 | " | 222 |
Saya mendapat tugas yang cukup standar: untuk memfilter karakter yang dimasukkan oleh pengguna di input, yaitu pengguna dapat memasukkan serangkaian angka dan huruf ke dalam string, misalnya, "5s68d.4r55e.6t5", dan saya harus mengirim jumlah yang benar dalam rubel ke server - "568.455" (rubel).
Saya mengatasi tugas dengan cukup cepat dengan menggantung acara fokus pada input, tetapi solusi saya memiliki sejumlah kelemahan penting: di mana dalam contoh ini jumlah dalam rubel berakhir dan uang mulai? Jika pengguna memasukkan beberapa minus (nilai negatif juga benar dalam kasus ini), lalu minus mana yang dianggap sebagai awal baris? Dan seterusnya.
Oleh karena itu, skrip versi kedua muncul dengan ekspresi reguler pada acara keyup:
$(e.curretTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
Tetapi ternyata, metode ini memiliki kelemahan yang signifikan (saya tidak bermaksud bahwa pengguna melihat karakter yang dia masukkan dan kemudian karakter ini menghilang), yaitu, jika Anda meletakkan kursor, misalnya, di tengah yang dimasukkan. nomor di input, masukkan huruf, maka skrip akan memotong huruf, tetapi akan membuang kursus ke akhir baris.
Untuk alasan ini, seorang teman senior menginstruksikan untuk menulis fungsi untuk acara penekanan tombol. Setelah 30 menit, versi ketiga dari fungsi sudah siap dan terlihat seperti ini:
Function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode || e.keyCode || 0; // izinkan backspace, tab, delete, enter , panah, angka, dan angka keypad HANYA // home, end, titik, dan desimal numpad kembali (kunci == 8 || kunci == 9 || kunci == 13 || kunci == 46 || kunci == 110 | | kunci == 190 || (kunci >= 35 && kunci<= 40) ||
(key >= 48 && kunci<= 57) ||
(key >= 96 && kunci<= 105));
});
});
};
Kode tersebut diambil dari stackoverflow, tetapi kode saya tidak jauh berbeda dengan contoh di atas.
Semuanya tampak indah - pengguna tidak melihat angka yang dimasukkan dan kursor tidak melompat ke akhir baris, tetapi, ternyata, kami bersukacita terlalu dini. Jika Anda melihat kode kunci dari tombol pada sistem operasi yang berbeda (mac, linux, win), maka mereka memiliki beberapa perbedaan, dan jika Anda menambahkan ini fakta bahwa tidak semua bunga poppy memiliki numPud dan, oleh karena itu, angka dimasukkan dengan shift ditekan dan angka juga dapat dimasukkan dari keyboard virtual. Hasilnya adalah kode berkali-kali lebih besar dari contoh terakhir.
Akibatnya, saya menulis skrip untuk acara keyup dan itu berfungsi dengan satu-satunya kelemahan - pengguna melihat nomor yang dimasukkan sebentar. Untuk alasan yang jelas, saya tidak dapat memposting skrip, tetapi situasi ini mendorong saya untuk menulis skrip baru, yang saya posting di github. Saya telah membuat skrip lebih fleksibel - sekarang ini lebih tentang meneruskan nilai ke elemen DOM daripada memodifikasi nilai input di input (itulah langkah selanjutnya).
Pada saat penulisan, beberapa parameter dapat diteruskan ke suatu fungsi:
- forDisplay: true, // untuk ditampilkan dalam divs
- classOfDomElement: "",// kelas elemen DOM dipisahkan dengan koma tanpa spasi
- idOfDomElement: "",// id elemen DOM dipisahkan dengan koma tanpa spasi
- //untukInput: salah,
- forSave: false, // fungsi forSave - hanya mengembalikan angka putus-putus
- negatif: salah
- afterPoint: 2, // jumlah digit setelah titik
- showPoint: benar, // tunjukkan titik sebelum masuk kopecks
- mata uang: "gosok" // mata uang
Salah satu tugas paling umum. Anda juga ingin melindungi formulir dari memasukkan tanda kutip dan garis miring, atau Anda ingin melakukan transliterasi instan. Jadi bagaimana lagi di sisi klien untuk menempatkan isi formulir dalam urutan yang benar?
Bagaimana cara menonaktifkan atau mengganti karakter tertentu di bidang JS atau textarea?
Logikanya sederhana - kami membuat larik pertama dengan karakter yang ingin kami ganti, dan kemudian yang kedua - dengan yang kami masukkan alih-alih yang pertama. Total: dua array dengan jumlah elemen yang sama(!).
var transChars = new Array(""",""");
{
var dari = namaForm;
var ke = "";
varlen = dari.panjang;
karakter var, isRus;
untuk (var i = 0; i< len; i++)
{
isRus = salah;
untuk (var j = 0; j< rusChars.length; j++)
{
{
isRus = benar;
merusak;
}
}
}
}
Anda dapat mengisi array dengan karakter pengganti Anda sendiri. Semua yang kamu butuhkan! Di bawah ini adalah contoh.
Jika kita ingin mengganti, misalnya, Cyrillic dengan karakter Latin, atau, dengan kata lain, membuat transliterasi instan) Lihat di bawah:
Var rusChars = new Array("A","a",,"B",,"b",,"C",,"c",,D",,"g",,D",,"e",,"E", "e", "ё", "ё", "F", "g", "Z", "z",
"Sh", "w", "Sch", "u", "E", "e", "Yu", "yu", "Aku", "Aku", "S", "s", "b "","b");
"sh", "sh", "csh", "csh", "e", "e", "u", "u", "ya", "ya", "i", "i","" ,"");
Jika kami ingin mengganti karakter tertentu di bidang - tanda kutip tunggal dan ganda dengan tanda kutip, yang, ketika disimpan dalam database, tidak akan memungkinkan untuk mendapatkan data yang salah).
Var rusChars = new Array(""","\"");
var transChars = new Array(""",""");
Bagaimana cara memanggil fungsi mengganti karakter di suatu bidang?
Kami menambahkan yang berikut ini di akhir input atau textarea. Nilai pertama adalah pengidentifikasi formulir, yang kedua adalah bidang dengan simbol yang dimasukkan, yang ketiga - jika kita ingin menampilkan simbol di bidang lain, maka kita tentukan pengidentifikasi bidang kedua. Anda dapat membiarkan pengidentifikasi tetap sama)Onblur="convert("form name", "dari mana kita mengubah", "di mana kita menempelkan yang diganti");"
Nah, di bawah ini adalah contoh bekerja dengan file dan melihat demo!
Beberapa contoh demo penggantian karakter di kolom input
Mengganti karakter tertentu di bidang input menggunakan JS
parameter key name parameter key value, yang dapat berisi: digit "0-9", satu plus "+" atau minus "-", satu karakter "e" atau "E", satu titik ".". Surat dapat dimasukkan, tetapi formulir tidak akan dikirimkan ketika tombol kirim diklik, tetapi akan muncul pesan kesalahan. Paling sering itu tidak diatur. Pengguna dapat mengubahnya jika atribut readonly dan disabled tidak ditentukan. modifikasi pengguna memblokir akses yang diblokir, modifikasi pengguna dan transfer data bidang parameter saat ini tidak boleh kosong
Ubah langkah, yang dapat berupa bilangan bulat positif atau bilangan pecahan. Nilai nilai adalah kelipatan dari nilai langkah, yaitu habis dibagi tanpa sisa. Contoh nilai yang diperbolehkan untuk nilai dengan step="20" : …, -40, -20, 0, 20, 40, …. Standarnya adalah 1 . Itu adalah akan menampilkan kesalahan jika Anda memasukkan pecahan desimal. Untuk menghapus batasan, Anda perlu menetapkan file . nilai minimum yang mungkin diperlukan untuk mengirimkan formulir nilai maksimum yang mungkin diperlukan untuk mengirimkan formulir rintisan tooltip hover tooltip pelengkapan otomatis. Anda dapat mematikannya atau membuatnya lebih spesifik. daftar nilai bidang fokus yang direkomendasikan (yaitu, periode antara mengklik elemen dan mengklik di luar elemen) yang diperoleh saat memuat dokumen
Bidang tidak cocok untuk string teks 16 digit atau lebih, seperti nomor kartu kredit, karena angka panjang dari 900719254740991 dapat dibulatkan.
jumlah barang
- menambah dan mengurangi nilai bidang numerik menggunakan tombol perubahan langkah,
- pesan error saat memasukkan huruf dan angka pecahan,
- nilai minimalnya adalah 1.
Bahkan bilangan bulat positif
Bilangan bulat positif ganjil
angka bulat
desimal titik mengambang
Format harga moneter: "rubel, kopek" dengan dua tempat desimal
Batasi jumlah karakter dalam bidang hingga 5
Kurangi panjangnya
Atribut minlength , maxlength , dan size tidak berfungsi.
- Jumlah karakter yang diperlukan dalam bidang ditentukan oleh atribut min , max , dan step:
- Tentukan lebar dalam CSS (properti lebar):
Panah di
Sehingga panah awalnya, dan tidak hanya dengan: arahkan kursor dan: fokus di Chrome
Hapus panah
Penataan Gaya Panah Atas/Bawah CSS
Nonaktifkan input di bidang sehingga hanya tombol edit yang dapat digunakan
- + hanya bisa dibaca kelas="raz">Bagaimana cara melarang karakter tertentu dalam input?
Script di bawah ini akan memungkinkan Anda untuk memeriksa kebenaran set di lapangan. Ini akan membatasi masuknya karakter tertentu dalam bidang input teks.
Memeriksa karakter di bidang input teks dapat dilakukan pada input itu sendiri dan pada acara tertentu. Script dapat digunakan di bidang pendaftaran, formulir login, dll. Anda dapat menonaktifkan karakter tertentu dan sekelompok karakter. Misalnya, Anda dapat sepenuhnya melarang memasukkan angka, melarang spasi, tab, melarang karakter Sirilik atau Latin.
200?"200px":""+(this.scrollHeight+5)+"px");">
["0-9",":"] - karakter yang akan dilarang untuk dimasukkan di bidang ini. Ditambahkan dalam tanda kutip, dipisahkan dengan koma.
Kelompok karakter
"0-9" atau "\d" - nilai numerik
"а-я" - huruf kecil Cyrillic
"A-Z" - huruf kapital Cyrillic
"А-я" - semua huruf Sirilik
"a-z" - huruf kecil Latin (Huruf pertama adalah Latin)
"A-Z" - huruf kapital dari alfabet Latin (Huruf pertama adalah Latin)
"A-z" - semua huruf Latin (Huruf pertama adalah Latin)
"A-z" - semua huruf (Huruf pertama adalah latin)
"\w" - semua huruf, angka, dan simbol "_"
"\s" - spasi, tab, dan karakter paragraf
| Perhatian! Menyalin materi ini dilarang tanpa tautan ke situs situs | |
| Sumber/ Borat | |