Memasukkan tanggal, waktu, alamat IP, dll. di halaman web memerlukan batasan format tertentu, jika tidak maka akan sulit bagi program untuk berkomunikasi dengan program tersebut. Saya baru-baru ini membuat program yang memerlukan aspek ini. Saya menemukan program yang sesuai di Internet, tetapi menggunakan Semuanya terdengar sangat buruk, jadi saya harus menerapkannya sendiri.
Pertama-tama terapkan dua fungsi untuk mengoperasikan kursor:
Copy kode kodenya sebagai berikut:
// Dapatkan posisi kursor saat ini pada kontrol kotak teks
fungsi 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 kontrol kotak teks
fungsi 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
Copy kode kodenya sebagai berikut:
// Menyegel pengolahan tradisional
window.event.returnvalue = salah;
Kemudian 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 .
Copy kode kodenya sebagai berikut:
// Tangani sendiri tombolnya
beralih (nKeyCode)
{
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.
Copy kode kodenya sebagai berikut:
jika (strText.match(expMask))
{
//Format masukannya benar
objTextBox.value = strTeks;
}
Terakhir pindahkan kursor ke lokasi yang sesuai.
// memindahkan 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.
Copy kode kodenya sebagai berikut:
//Kontrol representasi OBJ berdasarkan ekspresi reguler yang ditentukan
fungsi topeng(objTextBox,mask)
{
//masker
expMask = RegExp baru(topeng);
//Teks dalam kotak teks saat ini
var strText =objTextBox.nilai;
// panjang teks
var nTextLen=strTeks.panjang;
//Posisi kursor saat ini
var nCursorPos=getPos(objTextBox);
//menekan kode kunci
var nKeyCode = window.event.keyCode;
jika (nKeyCode > 95) nKeyCode -= (95-47);
// Menyegel pengolahan tradisional
window.event.returnvalue = salah;
// Tangani sendiri tombolnya
beralih (nKeyCode)
{
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>strText.panjang)
{
nCursorPos=strTeks.panjang;
}
merusak;
}
}
if (strText.match(expMask))
{
//Format masukannya benar
objTextBox.value = strTeks;
}
// memindahkan kursor
setCursor(objTextBox,nCursorPos);
}
// Dapatkan posisi kursor saat ini pada kontrol kotak teks
fungsi 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 kontrol kotak teks
fungsi setCursor(obj,num){
range=obj.createTextRange();
range.collapse(benar);
range.moveStart('karakter',angka);
rentang.pilih();
}
Cara menggunakan:
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 di 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
Copy kode kodenya sebagai berikut:
<nama masukan=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
Copy kode kodenya sebagai berikut:
<nama masukan=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})$')>