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

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

먼저 렌더링

HTML 코드

날짜:

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

js 코드

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

코드 복사 코드는 다음과 같습니다. http://code.jquery.com/jquery-1.9.1.min.js"> > 커서 위치를 가져오고 설정하는 작업이 많기 때문에 이전 블로그에서 소개한 여러 도구 기능을 사용합니다.

코드 복사 코드는 다음과 같습니다. //커서 위치 가져오기 함수 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 && 키 //커서가 날짜의 끝 부분에 있거나 커서의 다음 문자가 "-"인 경우 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 호출을 통해 이 플러그인을 요소에 바인딩하는 인터페이스가 부족합니다

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

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

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