웹 페이지에 날짜, 시간, 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 = 거짓;
그런 다음 처리해야 하는 해당 키보드 메시지를 처리합니다.
텍스트 상자 자체에는 너무 많은 사용자 작업이 필요하지 않기 때문에 여기에서 몇 가지 필요한 작업을 처리하면 됩니다. 따라서 커서를 앞으로 이동하고 뒤로 이동하고 작업을 삭제하면 텍스트 상자의 기본 기능이 매우 원활해집니다. .
다음과 같이 코드 코드를 복사합니다.
// 버튼을 직접 처리
스위치(nKeyCode)
{
case 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 표현을 제어합니다.
함수 마스크(objTextBox,마스크)
{
//마스크
expMask = new RegExp(마스크);
//현재 텍스트 상자의 텍스트
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 = 거짓;
// 버튼을 직접 처리
스위치(nKeyCode)
{
case 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);
범위.선택();
}
사용 방법:
1. 기본, 무기한 형식 초기값을 설정합니다. 예를 들어 날짜 및 시간 형식의 초기 값은 //:입니다. 이는 (연/월/일 시:분:초)를 의미합니다. IP는...(192.168.0.1)입니다. 실제로 정규식을 위반하지 않는 문자를 설정하면 됩니다.
2. 양식의 TEXT 상자에 있는 onKeyDown 이벤트에서 마스크 함수를 호출합니다. 매개변수 objTextBox는 지정된 텍스트 상자의 이름입니다. 매개변수 마스크는 정규식 형식의 마스크입니다.
예:
날짜/시간 마스크 상자를 사용하려면
다음과 같이 코드 코드를 복사합니다.
<입력 이름=i_etmend 유형=텍스트 id=i_etmend 값={I_ETMEND} 최대 길이=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 마스크 박스를 사용하려면
다음과 같이 코드 코드를 복사합니다.
<입력 이름=i_bip 유형=텍스트 id=i_bip 값={I_BIP} 최대 길이=15 onkeydown=mask(i_bip, '^([0-9]{0,3}[/.][0-9]{0, 3}[/.][0-9]{0,3}[/.][0-9]{0,3})$')>