jQuery melaksanakan pemformatan input tarikh mudah control_jquery

Terdapat lebih daripada seratus baris kod js.

Pertama rendering

kod html

Tarikh:

Tetapkan nama kelas elemen input kepada hhm-dateInputer, dan gunakan kelas ini untuk mengikat kawalan input tarikh.

kod js

Pustaka jQuery digunakan di sini, terutamanya digunakan untuk memilih elemen dan acara mengikat.

Salin kod Kod adalah seperti berikut: http://code.jquery.com/jquery-1.9.1.min.js"> > Oleh kerana terdapat banyak operasi untuk mendapatkan dan menetapkan kedudukan kursor, beberapa fungsi alat yang diperkenalkan dalam blog sebelum ini digunakan.

Salin kod Kod adalah seperti berikut: //Dapatkan kedudukan kursor fungsi getCursor(elem) { //IE 9, 10, pelayar lain Jika (elem.selectionStart !== undefined) { return elem.selectionStart; } lain { //IE 6,7,8 julat var = document.selection.createRange(); range.moveStart("character", -elem.value.length); var len = julat.teks.panjang; balik len; } } //Tetapkan kedudukan kursor set fungsiKursor(elemen, indeks) { //IE 9, 10, pelayar lain Jika (elem.selectionStart !== undefined) { elem.selectionStart = indeks; elem.selectionEnd = indeks; } lain { //IE 6,7,8 julat var = elem.createTextRange(); Range.moveStart("character", -elem.value.length); //Alihkan sempadan kiri ke titik permulaan range.move("character", index); //Kursor diletakkan pada kedudukan indeks julat.pilih(); } } //Dapatkan teks pilihan fungsi getSelection(elem) { //IE 9, 10, pelayar lain Jika (elem.selectionStart !== undefined) { kembalikan elem.value.substring(elem.selectionStart, elem.selectionEnd); } lain { //IE 6,7,8 julat var = document.selection.createRange(); julat pulangan.teks; } } //Tetapkan julat yang dipilih fungsi setSelection(elem, leftIndex, rightIndex) { Jika (elem.selectionStart !== undefined) { //IE 9, 10, pelayar lain elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } lain { //IE 6,7,8 julat var = elem.createTextRange(); range.move("character", -elem.value.length); // Kursor bergerak ke kedudukan 0. //Di sini mesti moveEnd dahulu dan kemudian moveStart //Oleh kerana jika sempadan kiri ditetapkan menjadi lebih besar daripada sempadan kanan, penyemak imbas secara automatik akan menjadikan sempadan kanan sama dengan sempadan kiri. range.moveEnd("character", rightIndex); range.moveStart("character", leftIndex); julat.pilih(); } } ----------------------- Boom!

Mari kita bincangkan tentang idea utama dahulu. Sebenarnya, anda boleh melukis gambar di sini, tetapi saya tidak tahu cara melukisnya. Sila berikan saya pendapat anda.

Mula-mula cari elemen dengan nama kelas hhm-dateInputer.

Ikat dua fungsi pengendalian acara padanya. keydown, fokus, kabur

fokus

Tentukan jika kandungan elemen input kosong, kemudian tetapkan nilai awalnya kepada "____-__-__"

blur (Terima kasih kepada cadangan daripada rakan-rakan dalam komen di bawah, acara ini akan menjadi lebih sempurna)

Tentukan sama ada kandungan elemen input ialah nilai awal "____-__-__", tetapkan nilainya kepada kosong ""

keydown

Mengapa bukan keyup, tetapi keydown: Kami tahu bahawa apabila peristiwa keydown berlaku, aksara pada papan kekunci belum lagi dimasukkan ke dalam kotak input, yang sangat penting. Jika perlu, kami boleh menghalang input aksara yang tidak sesuai dalam program.

1. Mula-mula dapatkan nilai Kod kunci daripada peristiwa objek acara Apabila ia dinilai sebagai nombor, padam satu garis bawah selepas nombor. 2. Apabila nilai kod kunci mewakili pemadaman kunci, padamkan nombor dan tambah garis bawah. 3. KeyCode mengembalikan palsu dalam kes lain, menghalang input aksara.

Fungsi setTimeout akan digunakan dalam langkah pertama dan kedua di atas untuk melaksanakan operasi tertentu. Fungsi ini digunakan kerana aksara utama dalam acara keyup sebenarnya tidak digunakan pada kotak teks Operasi dalam setTimeout boleh menyelesaikan masalah ini.

Selain itu, terdapat kaedah resetCursor yang sangat penting dalam kod Kaedah ini dipanggil beberapa kali dalam program untuk menetapkan kursor ke kedudukan input yang sesuai.

Salin kod Kod adalah seperti berikut: //Tetapkan kursor pada kedudukan yang betul set semula fungsiKursor(elemen) { nilai var = elem.value; indeks var = nilai.panjang; //Apabila pengguna memilih dan memadam beberapa teks, kandungan hanya boleh ditetapkan kepada format awal. Jika (elem.value.length !== dateStr.length) { elem.value = dateStr; } //Letakkan kursor di hadapan _garis bawah pertama //Jika tiada garis bawah ditemui, letakkan di hujung var temp = value.search(/_/); Indeks = suhu > -1 ? setCursor(elem, indeks); }

Kod js lengkap disiarkan di bawah.

Salin kod Kod adalah seperti berikut: $(fungsi(){ var inputs = $(".hhm-dateInputer"); var dateStr = "____-__-__"; inputs.each(fungsi(index,elem){ var input = $(this); input.on("keydown",function(event){ var that = this; //Kotak input yang mencetuskan acara pada masa ini. var key = event.keyCode; var cursorIndex = getCursor(that); Jika(kunci >= 48 && kunci //Jika kursor berada di penghujung tarikh atau aksara seterusnya kursor ialah "-", kembalikan palsu untuk mengelakkan aksara daripada dipaparkan. If(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;} //Apabila tiada garis bawah dalam rentetan, kembalikan palsu If(that.value.search(/_/) === -1){return false;} var fron = that.value.substring(0,cursorIndex); //Teks sebelum kursor var reg = /(d)_/; setMasa tamat(fungsi(){ //Watak-watak telah dimasukkan ke dalam teks selepas //Teks selepas kursor var end = that.value.substring(cursorIndex,that.value.length); //Alih keluar garis bawah selepas nombor yang baru dimasukkan_ That.value = fron end.replace(reg,"$1"); set semula Kursor(itu); },1); kembali benar; // kekunci padam "Backspace" }lain jika(kunci == 8){ // tidak boleh dipadamkan apabila kursor berada di hadapan. Tetapi pertimbangkan pemadaman apabila semua teks dipilih If(!cursorIndex && !getSelection(that).length){ return false;} //Pengendalian garis bawah yang ditemui semasa pemadaman If(that.value.charAt(cursorIndex -1) == "-"){ var ar = that.value.split(""); ar.splice(cursorIndex-2,1,"_"); That.value = ar.join(""); set semula Kursor(itu); pulangan palsu; } setTimeout(function(){ //Tetapkan semula apabila nilai kosong If(that.value === "") { That.value = "____-__-__"; set semula Kursor(itu); } //Kedudukan yang dipadam digariskan var kursor = getCursor(itu); var ar = that.value.split(""); ar.splice(kursor,0,"_"); That.value = ar.join(""); set semula Kursor(itu); },1); kembali benar; } pulangan palsu; }); input.on("fokus",fungsi(){ Jika(!this.value){ This.value = "____-__-__"; } set semula Kursor(ini); }); input.on("kabur",function(){ If(this.value === "____-__-__"){ This.value = ""; } }); }); //Tetapkan kursor pada kedudukan yang betul Set semula fungsiKursor(elemen){ nilai var = elem.value; indeks var = nilai.panjang; //Apabila pengguna memilih dan memadam beberapa teks, kandungan hanya boleh ditetapkan kepada format awal. If(elem.value.length !== dateStr.length){ elem.value = dateStr; } var temp = value.search(/_/); indeks = temp> -1? setCursor(elem,index); //Letakkan kursor di hadapan _garis bawah pertama //Jika tiada garis bawah ditemui, letakkan di hujung } }); fungsi getCursor(elem){ //IE 9, 10, pelayar lain If(elem.selectionStart !== undefined){ return elem.selectionStart; } lain{ //IE 6,7,8 julat var = document.selection.createRange(); range.moveStart("character",-elem.value.length); var len = julat.teks.panjang; pulangkan len; } } set fungsiKursor(elemen, indeks){ //IE 9, 10, pelayar lain If(elem.selectionStart !== undefined){ elem.selectionStart = indeks; elem.selectionEnd = indeks; } lain{//IE 6,7,8 julat var = elem.createTextRange(); Range.moveStart("character",-elem.value.length); //Alihkan sempadan kiri ke titik permulaan range.move("character",index); //Letakkan kursor pada kedudukan indeks julat.pilih(); } } fungsi getSelection(elem){ //IE 9, 10, pelayar lain If(elem.selectionStart !== undefined){ kembalikan elem.value.substring(elem.selectionStart,elem.selectionEnd); } lain{ //IE 6,7,8 julat var = document.selection.createRange(); julat pulangan.teks; } } fungsi setSelection(elem,leftIndex,rightIndex){ If(elem.selectionStart !== undefined){ //IE 9, 10, pelayar lain elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } lain{//IE 6,7,8 julat var = elem.createTextRange(); range.move("character",-elem.value.length); // Kursor bergerak ke kedudukan 0. //Di sini mesti moveEnd dahulu dan kemudian moveStart //Oleh kerana jika sempadan kiri ditetapkan menjadi lebih besar daripada sempadan kanan, penyemak imbas secara automatik akan menjadikan sempadan kanan sama dengan sempadan kiri. Range.moveEnd("character",rightIndex); Range.moveStart("character",leftIndex); julat.pilih(); } } Kesimpulan

Pemalam ini mungkin masih mempunyai beberapa bahagian yang memerlukan penambahbaikan.

Kekurangan antara muka untuk mengikat pemalam ini kepada elemen melalui panggilan js

Pemalam mungkin mempunyai beberapa pepijat

Jika terdapat sebarang masalah dengan kod di atas, sila maklumkan kepada saya.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.