//커서 위치 가져오기
함수 getCursor(elem) {
//IE 9, 10, 기타 브라우저
If (elem.selectionStart !== 정의되지 않음) {
return elem.selectionStart;
} else { //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character", -elem.value.length);
var len = range.text.length;
len 반환;
}
}
//커서 위치 설정
함수 setCursor(elem, index) {
//IE 9, 10, 기타 브라우저
If (elem.selectionStart !== 정의되지 않음) {
elem.selectionStart = index;
elem.selectionEnd = index;
} else { //IE 6,7,8
var range = elem.createTextRange();
Range.moveStart("character", -elem.value.length); //왼쪽 테두리를 시작점으로 이동
range.move("character", index) //커서는 인덱스 위치에 위치합니다
range.select();
}
}
//선택한 텍스트 가져오기
함수 getSelection(elem) {
//IE 9, 10, 기타 브라우저
If (elem.selectionStart !== 정의되지 않음) {
return elem.value.substring(elem.selectionStart, elem.selectionEnd);
} else { //IE 6,7,8
var range = document.selection.createRange();
반환 범위.텍스트;
}
}
//선택한 범위 설정
함수 setSelection(elem, leftIndex, rightIndex) {
If (elem.selectionStart !== undefine) { //IE 9, 10, 기타 브라우저
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.move("character", -elem.value.length); //커서가 0 위치로 이동합니다.
//여기에는 moveEnd가 먼저 있어야 하고 그 다음 moveStart가 있어야 합니다
//왼쪽 테두리가 오른쪽 테두리보다 크게 설정되어 있으면 브라우저는 자동으로 오른쪽 테두리를 왼쪽 테두리와 동일하게 만들기 때문입니다.
range.moveEnd("문자", rightIndex);
range.moveStart("character", leftIndex);
range.select();
}
}
------------ 붐! ---
먼저 주요 아이디어부터 말씀드리겠습니다. 사실 여기서 그림을 그려도 되지만 어떻게 그리는지 모르겠어요. 의견 부탁드립니다.
먼저 클래스 이름이 hhm-dateInputer인 요소를 찾습니다.
두 가지 이벤트 처리 기능을 바인딩합니다. 키다운, 초점, 흐림
집중
입력 요소 내용이 비어 있는지 확인한 후 초기 값을 "____-__-__"로 설정합니다.
blur (아래 댓글에 친구들의 추천 덕분에 이번 이벤트는 더욱 완벽해질 것입니다)
입력 요소 내용이 초기값 "____-__-__"인지 확인하고 해당 값을 빈 ""으로 설정합니다.
키다운
keyup이 아니라 keydown이 필요한 이유: keydown 이벤트가 발생하면 키보드의 문자가 아직 입력 상자에 입력되지 않았는데 이는 매우 중요합니다. 필요한 경우 프로그램 내 부적절한 문자 입력을 방지할 수 있습니다.
1. 먼저 이벤트 객체 이벤트에서 keyCode 값을 가져옵니다. 숫자로 판단되면 숫자 뒤의 밑줄을 하나 삭제합니다.
2. keyCode 값이 키 삭제를 나타낼 경우 해당 숫자를 삭제하고 밑줄을 추가합니다.
3. 그 외의 경우 KeyCode는 false를 반환하여 문자 입력을 방지합니다.
setTimeout 함수는 위의 첫 번째 및 두 번째 단계에서 특정 작업을 수행하는 데 사용됩니다. 이 함수는 keyup 이벤트의 키 문자가 실제로 텍스트 상자에 적용되지 않았기 때문에 사용됩니다. setTimeout의 작업으로 이 문제를 해결할 수 있습니다.
또한 코드에는 매우 중요한 ResetCursor 메서드가 있습니다. 이 메서드는 커서를 적절한 입력 위치에 설정하기 위해 프로그램에서 여러 번 호출됩니다.
//커서를 올바른 위치로 설정
함수 ResetCursor(elem) {
var 값 = elem.value;
var index = value.length;
//사용자가 일부 텍스트를 선택하고 삭제하면 내용은 초기 형식으로만 설정될 수 있습니다.
If (elem.value.length !== dateStr.length) {
elem.value = dateStr;
}
//첫 번째 밑줄 앞에 커서를 놓습니다
//밑줄이 없으면 맨 마지막에 넣으세요
var temp = value.search(/_/);
인덱스 = 온도 > -1 ? 온도 : 인덱스;
setCursor(요소, 인덱스);
}
$(함수(){
var 입력 = $(".hhm-dateInputer");
var dateStr = "____-__-__";
inputs.each(function(index,elem){
var 입력 = $(this);
input.on("keydown",function(event){
var that = this; //현재 이벤트를 트리거하는 입력 상자입니다.
var key = event.keyCode;
var cursorIndex = getCursor(that);
// 숫자를 입력하세요
If(키 >= 48 && 키 <= 57){
//커서가 날짜의 끝 부분에 있거나 커서의 다음 문자가 "-"인 경우 false를 반환하여 문자가 표시되지 않도록 합니다.
If(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
//문자열에 밑줄이 없으면 false를 반환합니다
If(that.value.search(/_/) === -1){return false;}
var fron = that.value.substring(0,cursorIndex) //커서 앞의 텍스트
var reg = /(d)_/;
~ >
//커서 뒤의 텍스트
var end = that.value.substring(cursorIndex,that.value.length);
//새로 삽입한 숫자 뒤의 밑줄 제거_
That.value = fron end.replace(reg,"$1");
> >
>
},1);
true를 반환합니다.
//"백스페이스" 삭제 키
}else if(키 == 8){
> // 커서가 앞에 있으면 삭제할 수 없습니다. 하지만 모든 텍스트를 선택한 후에는 삭제를 고려하세요
If(!cursorIndex && !getSelection(that).length){ return false;}
//삭제 중 발생한 밑줄 처리
If(that.value.charAt(cursorIndex -1) == "-"){
var ar = that.value.split("");
ar.splice(cursorIndex-2,1,"_");
That.value = ar.join("");
>
false를 반환합니다.
} setTimeout(function(){
//값이 비어 있으면 재설정
If(that.value === "") {
That.value = "____-__-__";
~ ~ ResetCursor(that);
}
//삭제된 위치에는 밑줄이 그어져 있습니다
var 커서 = getCursor(that);
var ar = that.value.split("");
ar.splice(cursor,0,"_");
That.value = ar.join("");
>
},1);
true를 반환합니다.
}
false를 반환합니다.
});
input.on("focus",function(){
If(!this.value){
This.value = "____-__-__";
}
ResetCursor(this);
});
input.on("blur",function(){
If(this.value === "____-__-__"){
This.value = "";
}
});
});
//커서를 올바른 위치로 설정
함수 ResetCursor(elem){
var 값 = elem.value;
var index = value.length;
//사용자가 일부 텍스트를 선택하고 삭제하면 내용은 초기 형식으로만 설정될 수 있습니다.
If(elem.value.length !== dateStr.length){
elem.value = dateStr;
}
var temp = value.search(/_/);
인덱스 = 온도> -1? 온도: 인덱스;
setCursor(elem,index);
//첫 번째 밑줄 앞에 커서를 놓습니다
//밑줄이 없으면 맨 마지막에 넣으세요
}
});
함수 getCursor(elem){
//IE 9, 10, 기타 브라우저
If(elem.selectionStart !== 정의되지 않음){
return elem.selectionStart;
} else{ //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character",-elem.value.length);
var len = range.text.length;
len 반환;
}
}
함수 setCursor(elem,index){
//IE 9, 10, 기타 브라우저 If(elem.selectionStart !== 정의되지 않음){
elem.selectionStart = index;
elem.selectionEnd = index;
} else{//IE 6,7,8
var range = elem.createTextRange();
Range.moveStart("character",-elem.value.length); //왼쪽 테두리를 시작점으로 이동
range.move("character",index); //인덱스 위치에 커서를 놓습니다.
range.select();
}
}
함수 getSelection(elem){
//IE 9, 10, 기타 브라우저
If(elem.selectionStart !== 정의되지 않음){
return elem.value.substring(elem.selectionStart,elem.selectionEnd);
} else{ //IE 6,7,8
var range = document.selection.createRange();
반환 range.text;
}
}
함수 setSelection(elem,leftIndex,rightIndex){
If(elem.selectionStart !== 정의되지 않음){ //IE 9, 10, 기타 브라우저
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else{//IE 6,7,8
var range = elem.createTextRange();
range.move("character",-elem.value.length); //커서가 0 위치로 이동합니다.
//여기에는 moveEnd가 먼저 있어야 하고 그 다음 moveStart가 있어야 합니다
//왼쪽 테두리가 오른쪽 테두리보다 크게 설정되어 있으면 브라우저는 자동으로 오른쪽 테두리를 왼쪽 테두리와 동일하게 만들기 때문입니다.
Range.moveEnd("문자",rightIndex);
Range.moveStart("character",leftIndex);
range.select();
}
}