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 && 키 <= 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 호출을 통해 이 플러그인을 요소에 바인딩하는 인터페이스가 부족합니다
플러그인에 일부 버그가 있을 수 있습니다
위 코드에 문제가 있으면 언제든지 알려주세요.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











요즘 우리는 전화를 켤 수 없거나 시스템 충돌과 같은 지연과 같은 몇 가지 문제에 필연적으로 직면하게 될 것입니다. 그러나 사용하는 동안 휴대폰은 우리 삶에서 없어서는 안될 부분이되었습니다. 우리는 종종 당황하며 때로는 이러한 문제에 대한 해결책이 없습니다. 휴대폰 문제를 해결하는 데 도움이 되도록 이 기사에서는 휴대폰 포맷 복구 및 휴대폰을 정상 작동으로 복원하는 몇 가지 방법을 소개합니다. 데이터 백업 - 포맷 과정에서 사진, 연락처 등 중요한 정보가 손실되지 않도록 보호하세요. 휴대폰을 포맷하기 전에 가장 먼저 고려해야 할 사항은 휴대폰에 있는 중요한 데이터와 파일을 백업하는 것입니다. 데이터 보안을 보장하거나 파일을 클라우드 스토리지 서비스로 전송하도록 선택하려면 컴퓨터에 연결하여 백업할 수 있습니다. 시스템에 내장된 복구 기능 사용 - 간단

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

HTML 형식화 방법: 1. 온라인 HTML 형식화 도구를 사용합니다. 2. Visual Studio Code의 Shift + Alt + F와 같은 코드 편집기와 함께 제공되는 HTML 형식화 바로 가기 키를 사용합니다. 3. Sublime과 같은 플러그인을 사용합니다. 텍스트 HTML/CSS/JS Prettify 플러그인 4. HTML Tidy와 같은 명령줄 도구를 사용합니다. 5. 코딩 표준 및 습관에 따른 수동 형식 지정.

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인
