jQuery는 간단한 날짜 입력 형식 control_jquery를 구현합니다.

JS 코드는 100줄이 넘습니다.

먼저 렌더링

HTML 코드

날짜: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="날짜를 입력하세요">

입력 요소 클래스 이름을 hhm-dateInputer로 설정하고 이 클래스를 사용하여 날짜 입력 컨트롤을 바인딩합니다.

js 코드

여기에서는 jQuery 라이브러리가 사용되며 주로 요소 선택 및 이벤트 바인딩에 사용됩니다.

코드 복사 코드는 다음과 같습니다.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

커서 위치를 가져오고 설정하는 작업이 많기 때문에 이전 블로그에서 소개한 여러 도구 기능을 사용합니다.

코드 복사 코드는 다음과 같습니다.

//커서 위치 가져오기
함수 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(요소, 인덱스);
}

전체 js 코드는 아래에 게시되어 있습니다.

코드 복사 코드는 다음과 같습니다.

$(함수(){
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();
}
}

결론

이 플러그인에는 아직 개선이 필요한 부분이 있을 수 있습니다.

js 호출을 통해 이 플러그인을 요소에 바인딩하는 인터페이스가 부족합니다

플러그인에 일부 버그가 있을 수 있습니다

위 코드에 문제가 있으면 언제든지 알려주세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.