การป้อนวันที่ เวลา ที่อยู่ IP ฯลฯ ในหน้าเว็บจำเป็นต้องมีข้อจำกัดด้านรูปแบบบางอย่าง มิฉะนั้นโปรแกรมจะสื่อสารกับโปรแกรมได้ยาก
เมื่อเร็วๆ นี้ ฉันกำลังทำงานกับโปรแกรมที่จำเป็นต้องใช้ด้านนี้ ฉันพบโปรแกรมที่เกี่ยวข้องบนอินเทอร์เน็ต แต่มันใช้งานยุ่งยากมาก ดังนั้นฉันจึงต้องลงมือเอง
ขั้นแรกให้ใช้สองฟังก์ชันเพื่อใช้งานเคอร์เซอร์:
// รับตำแหน่งเคอร์เซอร์ปัจจุบันของฟังก์ชันควบคุมกล่องข้อความ getPos(obj)
-
obj.โฟกัส();
var workRange=document.selection.createRange();
obj.เลือก();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(เท็จ);
workRange.เลือก();
กลับเลน;
-
//กำหนดตำแหน่งเคอร์เซอร์ปัจจุบันของฟังก์ชันควบคุมกล่องข้อความ setCursor(obj,num){
range=obj.createTextRange();
range.collapse(จริง);
range.moveStart('ตัวละคร',num);
ช่วง.เลือก();
-
แนวคิดหลักของการใช้งานฟังก์ชันหลักคือการดำเนินการบางอย่างเมื่อกดแป้นพิมพ์ซึ่งฉันออกแบบไว้ในเหตุการณ์ OnKeyDown
ใน OnKeyDown ขั้นแรกป้องกันการประมวลผลแป้นพิมพ์เริ่มต้นของระบบ
// ปิดผนึกการประมวลผลแบบดั้งเดิม window.event.returnValue = false;
จากนั้นจึงประมวลผลข้อความแป้นพิมพ์ที่เกี่ยวข้องซึ่งจำเป็นต้องประมวลผล
เพียงประมวลผลบางสิ่งที่จำเป็นที่นี่ เนื่องจากตัวกล่องข้อความไม่ต้องการการดำเนินการของผู้ใช้มากเกินไป ดังนั้นให้เลื่อนเคอร์เซอร์ไปข้างหน้า ย้อนกลับ และลบการดำเนินการ เพื่อให้กล่องข้อความของคุณมีฟังก์ชันพื้นฐานในขณะนี้ การดำเนินการจะราบรื่นมาก .
// จัดการสวิตช์ปุ่ม (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:// หากการกระทำคือปุ่มลูกศร [left]
กรณีที่ 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,mask)
-
//Mask 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 = false;
// จัดการสวิตช์ปุ่ม (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",allRange);
var len=workRange.text.length;
workRange.collapse(เท็จ);
workRange.เลือก();
กลับเลน;
}
// กำหนดตำแหน่งเคอร์เซอร์ปัจจุบันของฟังก์ชันควบคุมกล่องข้อความ setCursor(obj,num){
range=obj.createTextRange();
range.collapse(จริง);
range.moveStart('ตัวละคร',num);
range.select();
-
การใช้งาน:
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}))$')">
หากต้องการใช้กล่อง IP Mask
<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})$')">