Memasukkan tanggal, waktu, alamat IP, dll. ke dalam halaman web memerlukan batasan format tertentu, jika tidak maka akan sulit bagi program untuk berkomunikasi dengan program.
Baru-baru ini, saya sedang mengerjakan sebuah program yang perlu menggunakan aspek ini. Saya menemukan program yang sesuai di Internet, tetapi program tersebut sangat rumit untuk digunakan, jadi saya harus menerapkannya sendiri.
Pertama-tama terapkan dua fungsi untuk mengoperasikan kursor:
// Mendapatkan posisi kursor saat ini dari fungsi kontrol kotak teks getPos(obj)
{
obj.fokus();
var workRange=dokumen.seleksi.createRange();
obj.pilih();
var allRange=dokumen.seleksi.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.teks.panjang;
workRange.collapse(salah);
workRange.pilih();
kembali len;
}
//Menetapkan posisi kursor saat ini pada fungsi kontrol kotak teks setCursor(obj,num){
range=obj.createTextRange();
range.collapse(benar);
range.moveStart('karakter',angka);
rentang.pilih();
}
Ide utama dari implementasi fungsi utama adalah untuk melakukan beberapa operasi saat keyboard ditekan, yang saya rancang di acara OnKeyDown.
Di OnKeyDown, pertama-tama lindungi pemrosesan keyboard default sistem
// segel window.event.returnValue = false pemrosesan tradisional;
lalu proses pesan keyboard terkait yang perlu diproses.
Cukup proses beberapa hal yang diperlukan di sini, karena kotak teks itu sendiri tidak memerlukan terlalu banyak operasi pengguna, jadi gerakkan kursor ke depan, mundur, dan hapus operasi tersebut, sehingga kotak teks Anda memiliki fungsi dasar. Pengoperasiannya sangat lancar sekarang .
// Tangani sakelar tombol (nKeyCode) sendiri
{
kasus 8:// jika tindakannya adalah backspace[<-]
{
strTeks = strTeks.substr(0,nCursorPos-1) + strTeks.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
merusak;
}
kasus 46:// jika tindakannya adalah del[del]
{
strTeks = strTeks.substr(0,nCursorPos) + strTeks.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
merusak;
}
kasus 38:// Jika tindakannya adalah tombol arah [atas]
kasus 39:// Jika tindakannya adalah tombol panah [kanan]
{
nCursorPos++;
merusak;
}
kasus 37:// Jika tindakannya adalah tombol panah [kiri]
kasus 40:// Jika tindakannya adalah tombol arah [bawah]
{
nCursorPos--;
merusak;
}
bawaan :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
jika (nCursorPos>strTeks.panjang)
{
nCursorPos=strTeks.panjang;
}
merusak;
}
}
Pesan lainnya akan menambahkan karakter. Karakter yang terlihat dan tidak terlihat akan ditambahkan dan kursor akan bergerak mundur. Lihat bagian penanganan default di atas.
Kemudian tentukan apakah mask sudah benar. Jika sudah benar, maka inputnya sah dan tampilan nilai ditambahkan ke kotak teks.
jika (strText.match(expMask))
{
//Format masukannya benar objTextBox.value = strText;
}
Terakhir pindahkan kursor ke lokasi yang sesuai.
//Pindahkan kursor setCursor(objTextBox,nCursorPos);
Menyelesaikan!
Tujuan utamanya adalah mengganti pesan keyboard sistem dengan pemrosesan Anda sendiri dan memblokir pesan sistem, sehingga Anda bisa mendapatkan kontrol maksimal.
Dengan cara ini, TEXTBOX yang membatasi format ekspresi reguler tertentu lahir.
Terlampir kode lengkapnya:
// Menurut ekspresi reguler yang ditentukan, kontrol fungsi representasi OBJ mask(objTextBox,mask)
{
//Mask expMask = RegExp baru(mask);
//Teks dalam kotak teks saat ini var strText =objTextBox.value;
// Panjang teks var nTextLen=strText.length;
// Posisi kursor saat ini var nCursorPos=getPos(objTextBox);
// Kode kunci yang ditekan var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Segel window.event.returnValue = false;
// Tangani sakelar tombol (nKeyCode) sendiri
{
kasus 8:// jika tindakannya adalah backspace[<-]
{
strTeks = strTeks.substr(0,nCursorPos-1) + strTeks.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
merusak;
}
kasus 46:// jika tindakannya adalah del[del]
{
strTeks = strTeks.substr(0,nCursorPos) + strTeks.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
merusak;
}
kasus 38:// Jika tindakannya adalah tombol arah [atas]
kasus 39:// Jika tindakannya adalah tombol panah [kanan]
{
nCursorPos++;
merusak;
}
kasus 37:// Jika tindakannya adalah tombol panah [kiri]
kasus 40:// Jika tindakannya adalah tombol arah [bawah]
{
nCursorPos--;
merusak;
}
bawaan :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
jika (nCursorPos>strTeks.panjang)
{
nCursorPos=strTeks.panjang;
}
merusak;
}
}
if (strText.match(expMask))
{
//Format masukannya benar objTextBox.value = strText;
}
//Memindahkan kursor setCursor(objTextBox,nCursorPos);
}
// Mendapatkan posisi kursor saat ini dari fungsi kontrol kotak teks getPos(obj)
{
obj.fokus();
var workRange=dokumen.seleksi.createRange();
obj.pilih();
var allRange=dokumen.seleksi.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.teks.panjang;
workRange.collapse(salah);
workRange.pilih();
kembali len;
}
// Menetapkan posisi kursor saat ini pada fungsi kontrol kotak teks setCursor(obj,num){
range=obj.createTextRange();
range.collapse(benar);
range.moveStart('karakter',angka);
range.select();
}
Penggunaan:
1. Tetapkan nilai awal format default dan tidak terbatas. Misal: nilai awal format tanggal dan waktu adalah "//::", yang artinya (tahun/bulan/hari jam:menit:detik). IP-nya adalah "..." (192.168.0.1). Faktanya, cukup atur karakter yang tidak melanggar ekspresi reguler.
2. Panggil fungsi mask dalam event OnKeyDown pada kotak TEKS formulir. Parameter objTextBox adalah nama kotak teks yang ditentukan. Parameter mask adalah masker dalam format ekspresi reguler.
Contoh:
Untuk menggunakan kotak masker datetime
<input name="i_etmend" type="text" id="i_etmend" value="{I_ETMEND}" maxlength="19" onkeydown="mask(i_etmend, '^(([0-9]{0,4} )-([0-9]{0,2})-([0-9]{0,2}) ([0-9]{0,2}):([0-9]{0 ,2}):([0-9]{0,2}))$')">
Untuk menggunakan kotak masker IP
<input name="i_bip" type="text" id="i_bip" value="{I_BIP}" maxlength="15" onkeydown="mask(i_bip, '^([0-9]{0,3}[ .][0-9]{0,3}[.][0-9]{0,3}[.][0-9]{0,3})$')">