


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.
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.
//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.
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.
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);
}
$(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 <= 57){
//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.

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Pada masa kini, kita pasti akan menghadapi beberapa masalah seperti tidak dapat menghidupkan telefon, ketinggalan, dan lain-lain, seperti ranap sistem, tetapi semasa penggunaan, telefon bimbit telah menjadi bahagian yang sangat diperlukan dalam kehidupan kita. Kami sering mengalami kerugian, dan kadangkala, tiada penyelesaian untuk masalah ini. Untuk membantu anda menyelesaikan masalah telefon bimbit, artikel ini akan memperkenalkan anda kepada beberapa kaedah pemulihan format telefon bimbit dan memulihkan telefon anda kepada operasi biasa. Sandarkan data - lindungi maklumat penting, seperti foto dan kenalan, daripada hilang semasa proses pemformatan Sebelum memformat telefon anda, perkara pertama yang perlu dipertimbangkan ialah menyandarkan data dan fail penting pada telefon anda. Untuk memastikan keselamatan data, atau memilih untuk memindahkan fail ke perkhidmatan storan awan, anda boleh menyandarkannya dengan menyambung ke komputer. Gunakan fungsi pemulihan terbina dalam sistem - mudah

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Kaedah pemformatan HTML: 1. Gunakan alat pemformatan HTML dalam talian 2. Gunakan kekunci pintasan pemformatan HTML yang disertakan dengan editor kod, seperti Shift + Alt + F dalam Visual Studio Code 3. Gunakan pemalam, seperti dalam Sublime Teks pemalam HTML/CSS/JS Prettify 4. Gunakan alat baris arahan, seperti HTML Tidy 5. Pemformatan manual mengikut piawaian dan tabiat pengekodan.

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
