웹 페이지에 날짜, 시간, IP 주소 등을 입력하려면 특정 형식 제한이 필요하며, 그렇지 않으면 프로그램이 프로그램과 통신하기 어렵습니다.
최근에 이 부분을 꼭 활용해야 하는 프로그램을 만들고 있었는데, 인터넷에서 해당 프로그램을 찾았는데, 사용하기가 너무 번거로워서 직접 구현을 하게 되었습니다.
먼저 커서를 작동하는 두 가지 함수를 구현합니다.
// 텍스트 상자 제어 함수 getPos(obj)의 현재 커서 위치를 가져옵니다.
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
렌을 반환;
}
//텍스트 상자 제어 함수의 현재 커서 위치 설정 setCursor(obj,num){
범위=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
범위.선택();
}
주요 기능 구현의 주요 아이디어는 키보드를 눌렀을 때 일부 작업을 수행하는 것인데, 이는 OnKeyDown 이벤트에서 설계했습니다.
OnKeyDown에서는 먼저 시스템의 기본 키보드 처리를 보호합니다
. // 기존 처리를 봉인합니다. window.event.returnValue = false;
그런 다음 처리해야 하는 해당 키보드 메시지를 처리합니다.
텍스트 상자 자체에는 너무 많은 사용자 작업이 필요하지 않기 때문에 여기에서 몇 가지 필요한 작업을 처리하면 됩니다. 따라서 커서를 앞으로 이동하고 뒤로 이동하고 작업을 삭제하면 텍스트 상자의 기본 기능이 매우 원활해집니다. .
// 버튼 스위치(nKeyCode)를 직접 처리합니다.
{
사례 8:// 작업이 백스페이스인 경우[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
부서지다;
}
Case 46:// 작업이 del[del]인 경우
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
부서지다;
}
case 38:// 액션이 방향키인 경우 [위]
case 39:// 동작이 화살표 키 [오른쪽]인 경우
{
nCursorPos++;
부서지다;
}
case 37:// 동작이 화살표 키 [왼쪽]인 경우
case 40:// 액션이 방향키인 경우 [하단]
{
nCursorPos--;
부서지다;
}
기본 :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
부서지다;
}
}
다른 메시지에는 문자가 추가되고 표시되는 문자와 보이지 않는 문자가 추가되고 커서가 뒤로 이동합니다. 위의 기본 처리 섹션을 참조하세요.
그런 다음 마스크가 올바른지 확인합니다. 올바른 경우 입력이 합법적이고 값 표시가 텍스트 상자에 추가됩니다.
if (strText.match(expMask))
{
//입력 형식이 정확합니다. objTextBox.value = strText;
}
마지막으로 커서를 적절한 위치로 이동합니다.
//커서 이동 setCursor(objTextBox,nCursorPos);
마치다!
주요 목적은 시스템의 키보드 메시지를 자신의 처리로 대체하고 시스템의 메시지를 차단하여 최대한의 제어권을 얻는 것입니다.
이런 식으로 지정된 정규식의 형식을 제한하는 TEXTBOX가 탄생합니다.
첨부된 코드는 전체 코드입니다.
// 지정된 정규식에 따라 OBJ 표현 함수를 제어합니다.mask(objTextBox,mask)
{
//마스크 expMask = new RegExp(mask);
//현재 텍스트 상자의 텍스트 var strText =objTextBox.value;
// 텍스트 길이 var nTextLen=strText.length;
// 현재 커서 위치 var nCursorPos=getPos(objTextBox)
// 누른 키 코드 var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// 기존 처리 봉인 window.event.returnValue = false;
// 버튼 스위치(nKeyCode)를 직접 처리합니다.
{
사례 8:// 작업이 백스페이스인 경우[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
부서지다;
}
Case 46:// 작업이 del[del]인 경우
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
부서지다;
}
case 38:// 액션이 방향키인 경우 [위]
case 39:// 동작이 화살표 키 [오른쪽]인 경우
{
nCursorPos++;
부서지다;
}
case 37:// 동작이 화살표 키 [왼쪽]인 경우
case 40:// 액션이 방향키인 경우 [하단]
{
nCursorPos--;
부서지다;
}
기본 :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
부서지다;
}
}
if (strText.match(expMask))
{
//입력 형식이 정확합니다. objTextBox.value = strText;
}
//커서 이동 setCursor(objTextBox,nCursorPos);
}
// 텍스트 상자 제어 함수 getPos(obj)의 현재 커서 위치를 가져옵니다.
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
렌을 반환;
}
// 텍스트 상자 제어 함수의 현재 커서 위치를 설정합니다. setCursor(obj,num){
범위=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
사용법:
1. 기본, 무기한 형식 초기 값을 설정합니다. 예를 들어 날짜 및 시간 형식의 초기 값은 "//::"이며 이는 (연/월/일 시:분:초)를 의미합니다. IP는 "..."(192.168.0.1)입니다. 실제로 정규식을 위반하지 않는 문자를 설정하면 됩니다.
2. 양식의 TEXT 상자에 있는 OnKeyDown 이벤트에서 마스크 함수를 호출합니다. 매개 변수 objTextBox는 지정된 텍스트 상자의 이름입니다. 매개변수 마스크는 정규식 형식의 마스크입니다.
예:
날짜/시간 마스크 상자를 사용하려면
<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 마스크 상자를 사용하려면
<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})$')">