การป้อนวันที่ เวลา ที่อยู่ IP ฯลฯ ในหน้าเว็บจำเป็นต้องมีข้อจำกัดด้านรูปแบบบางอย่าง ไม่เช่นนั้นโปรแกรมจะสื่อสารกับโปรแกรมได้ยาก บนอินเทอร์เน็ต แต่การใช้มันฟังดูแย่มากเลยต้องนำไปปฏิบัติด้วยตัวเอง
ขั้นแรกให้ใช้สองฟังก์ชันเพื่อใช้งานเคอร์เซอร์:
คัดลอกรหัสรหัสดังต่อไปนี้:
// รับตำแหน่งเคอร์เซอร์ปัจจุบันของตัวควบคุมกล่องข้อความ
ฟังก์ชั่น getPos (obj)
-
obj.โฟกัส();
var workRange=document.selection.createRange();
obj.เลือก();
var allRange=document.selection.createRange();
workRange.setEndPoint(StartToStart,ทุกช่วง);
var len=workRange.text.length;
workRange.collapse(เท็จ);
workRange.เลือก();
กลับเลน;
-
// กำหนดตำแหน่งเคอร์เซอร์ปัจจุบันของตัวควบคุมกล่องข้อความ
ฟังก์ชั่น setCursor (obj, num) {
range=obj.createTextRange();
range.ยุบ(จริง);
range.moveStart('ตัวละคร',num);
ช่วง.เลือก();
-
แนวคิดหลักของการใช้งานฟังก์ชันหลักคือการดำเนินการบางอย่างเมื่อกดแป้นพิมพ์ซึ่งฉันออกแบบไว้ในเหตุการณ์ onKeyDown
ใน onKeyDown ขั้นแรกให้ป้องกันการประมวลผลคีย์บอร์ดเริ่มต้นของระบบ
คัดลอกรหัสรหัสดังต่อไปนี้:
// ปิดผนึกการประมวลผลแบบดั้งเดิม
window.event.returnvalue = เท็จ;
จากนั้นประมวลผลข้อความบนแป้นพิมพ์ที่เกี่ยวข้องซึ่งจำเป็นต้องประมวลผล
เพียงประมวลผลบางสิ่งที่จำเป็นที่นี่ เนื่องจากตัวกล่องข้อความไม่ต้องการการดำเนินการของผู้ใช้มากเกินไป ดังนั้นให้เลื่อนเคอร์เซอร์ไปข้างหน้า ย้อนกลับ และลบการดำเนินการ เพื่อให้กล่องข้อความของคุณมีฟังก์ชันพื้นฐานในขณะนี้ การดำเนินการจะราบรื่นมาก .
คัดลอกรหัสรหัสดังต่อไปนี้:
// จัดการปุ่มด้วยตัวเอง
สวิตช์ (nKeyCode)
-
กรณีที่ 8:// ถ้าการกระทำนั้นเป็น backspace [<-]
-
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
หยุดพัก;
-
กรณีที่ 46:// ถ้าการกระทำเป็น del[del]
-
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
หยุดพัก;
-
กรณีที่ 38:// ถ้าการกระทำเป็นปุ่มทิศทาง [บน]
กรณีที่ 39:// หากการกระทำเป็นปุ่มลูกศร [ขวา]
-
nเคอร์เซอร์Pos++;
หยุดพัก;
-
กรณีที่ 37:// หากการกระทำเป็นปุ่มลูกศร [ซ้าย]
กรณีที่ 40:// ถ้าการกระทำเป็นปุ่มทิศทาง [ล่าง]
-
nCursorPos--;
หยุดพัก;
-
ค่าเริ่มต้น :
-
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nเคอร์เซอร์Pos++;
ถ้า (nCursorPos>strText.length)
-
nCursorPos=strText.ความยาว;
-
หยุดพัก;
-
-
ข้อความอื่นๆ จะเพิ่มอักขระ อักขระที่มองเห็นและมองไม่เห็นจะถูกเพิ่ม และเคอร์เซอร์จะเลื่อนกลับ ดูส่วนการจัดการเริ่มต้นด้านบน
จากนั้นตรวจสอบว่ามาสก์ถูกต้องหรือไม่ หากถูกต้อง แสดงว่าอินพุตนั้นถูกกฎหมายและการแสดงค่าจะถูกเพิ่มลงในกล่องข้อความ
คัดลอกรหัสรหัสดังต่อไปนี้:
ถ้า (strText.match(expMask))
-
//รูปแบบอินพุตถูกต้อง
objTextBox.value = strText;
-
สุดท้ายเลื่อนเคอร์เซอร์ไปยังตำแหน่งที่เหมาะสม
//เลื่อนเคอร์เซอร์
setCursor(objTextBox,nCursorPos);
เสร็จ!
วัตถุประสงค์หลักคือการแทนที่ข้อความคีย์บอร์ดของระบบด้วยการประมวลผลของคุณเองและบล็อกข้อความของระบบเพื่อให้คุณสามารถควบคุมได้สูงสุด
ด้วยวิธีนี้ TEXTBOX ที่จำกัดรูปแบบของนิพจน์ทั่วไปที่ระบุจึงเกิดขึ้น
คัดลอกรหัสรหัสดังต่อไปนี้:
//ควบคุมการแสดง OBJ ตามนิพจน์ทั่วไปที่ระบุ
ฟังก์ชั่นมาสก์ (objTextBox, มาส์ก)
-
//หน้ากาก
expMask = RegExp ใหม่ (มาสก์);
//ข้อความในกล่องข้อความปัจจุบัน
var strText =objTextBox.value;
// ความยาวข้อความ
var nTextLen=strText.length;
//ตำแหน่งเคอร์เซอร์ปัจจุบัน
var nCursorPos=getPos(objTextBox);
//กดรหัส
var nKeyCode = window.event.keyCode;
ถ้า (nKeyCode > 95) nKeyCode -= (95-47);
// ปิดผนึกการประมวลผลแบบดั้งเดิม
window.event.returnvalue = เท็จ;
// จัดการปุ่มด้วยตัวเอง
สวิตช์ (nKeyCode)
-
กรณีที่ 8:// ถ้าการกระทำนั้นเป็น backspace [<-]
-
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
หยุดพัก;
-
กรณีที่ 46:// ถ้าการกระทำเป็น del[del]
-
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
หยุดพัก;
-
กรณีที่ 38:// ถ้าการกระทำเป็นปุ่มทิศทาง [บน]
กรณีที่ 39:// หากการกระทำเป็นปุ่มลูกศร [ขวา]
-
nเคอร์เซอร์Pos++;
หยุดพัก;
-
กรณีที่ 37:// หากการกระทำเป็นปุ่มลูกศร [ซ้าย]
กรณีที่ 40:// ถ้าการกระทำเป็นปุ่มทิศทาง [ล่าง]
-
nCursorPos--;
หยุดพัก;
-
ค่าเริ่มต้น :
-
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nเคอร์เซอร์Pos++;
ถ้า (nCursorPos>strText.length)
-
nCursorPos=strText.ความยาว;
-
หยุดพัก;
-
-
ถ้า (strText.match(expMask))
-
//รูปแบบอินพุตถูกต้อง
objTextBox.value = strText;
-
//เลื่อนเคอร์เซอร์
setCursor(objTextBox,nCursorPos);
-
// รับตำแหน่งเคอร์เซอร์ปัจจุบันของตัวควบคุมกล่องข้อความ
ฟังก์ชั่น getPos (obj)
-
obj.โฟกัส();
var workRange=document.selection.createRange();
obj.เลือก();
var allRange=document.selection.createRange();
workRange.setEndPoint(StartToStart,ทุกช่วง);
var len=workRange.text.length;
workRange.collapse(เท็จ);
workRange.เลือก();
กลับเลน;
-
// กำหนดตำแหน่งเคอร์เซอร์ปัจจุบันของตัวควบคุมกล่องข้อความ
ฟังก์ชั่น setCursor (obj, num) {
ช่วง=obj.createTextRange();
range.ยุบ(จริง);
range.moveStart('ตัวละคร',num);
ช่วง.เลือก();
-
วิธีใช้:
1. ตั้งค่าเริ่มต้นรูปแบบเริ่มต้นที่ไม่แน่นอน ตัวอย่างเช่น: ค่าเริ่มต้นของรูปแบบวันที่และเวลาคือ // :: ซึ่งหมายถึง (ปี/เดือน/วัน ชั่วโมง:นาที:วินาที) IP คือ... (192.168.0.1) ที่จริงแล้วเพียงตั้งค่าอักขระที่ไม่ละเมิดนิพจน์ทั่วไป
2. เรียกใช้ฟังก์ชันมาสก์ในเหตุการณ์ onKeyDown ของกล่องข้อความของแบบฟอร์ม พารามิเตอร์ objTextBox คือชื่อของกล่องข้อความที่ระบุ มาสก์พารามิเตอร์คือมาสก์ในรูปแบบนิพจน์ทั่วไป
ตัวอย่าง:
หากต้องการใช้กล่องมาสก์ 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}))$')>
หากต้องการใช้กล่องไอพีมาสก์
คัดลอกรหัสรหัสดังต่อไปนี้:
<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})$')>