js 문자 인증 코드 입력 상자 수 동 구현
본 고 는 자신 이 수 동 으로 실현 하 는 전단 에서 흔히 볼 수 있 는 문자 인증 코드 입력 구성 요 소 를 기록 하고 수요 에서 점차적으로 최적화 하 는 과정 을 실현 한다.
본문
1.수요 분석
우선 효과 도 를 살 펴 보 자.
먼저 페이지 를 불 러 올 때 입력 상 자 는 초점 을 가 져 옵 니 다.사용자 가 숫자 를 입력 하면 초점 이 자동 으로 두 번 째 상자 로 넘 어 갑 니 다.네 상자 가 모두 입력 되면 제출 요청 을 보 내 는 것 을 모 의 합 니 다.여 기 는 하나의 탄 상자 로 입력 한 인증 코드 내용 을 출력 합 니 다.주류 프로 세 스 이외 의 수요:입력 상자 에 숫자 형식 만 입력 할 수 있 고 알파벳 을 입력 할 수 없습니다.비 숫자 형식 을 강제로 입력 하고 철회 키 를 눌 렀 을 때 입력 한 인증 코드 를 비 워 두 고 현재 초점 을 첫 번 째 입력 상자 로 전환 합 니 다.
2.전체 코드 구현.
대체적으로 사 고 는 페이지 를 불 러 올 때 첫 번 째 입력 상자 에 autofocus 속성 을 추가 하여 자동 으로 초점 을 얻 게 한 다음 에 키보드 클릭 이 벤트 를 감청 하 는 것 입 니 다.키보드 가 눌 렀 을 때 현재 버튼 이 숫자 버튼 인지 아 닌 지 를 판단 합 니 다.그렇지 않 으 면 현재 입력 상자 가 비어 있 고 초점 은 현재 입력 상자 에 있 습 니 다.숫자 라면.앞의 입력 상자 에 숫자 가 존재 하 는 지 여 부 를 판단 하고 존재 하지 않 으 면 앞 에 빈 입력 상자 로 초점 을 옮 깁 니 다.그렇지 않 으 면 현재 입력 상자 에 입력 하고 다음 입력 상자 로 초점 을 옮 깁 니 다.초점 은 입력 상자 의 위 류 를 통 해 이 루어 집 니 다.입력 길이 가 4 일 때 모든 입력 상자 의 숫자 를 문자열 로 연결 하여 탄 상자 로 알림 합 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.check-div {
width: 400px;
height: 600px;
margin: 100px auto;
border: 1px solid slategrey;
text-align: center;
}
h1 {
font-size: 24px;
}
.input-div {
margin-top: 100px;
}
input {
margin-left: 5px;
text-align: center;
width: 50px;
height: 50px;
border: none;
/* , border*/
outline: 1px solid black;
}
input:focus {
outline: 2px solid #3494fe;
}
</style>
</head>
<body>
<div class="check-div">
<h1> </h1>
<div class="input-div">
<input
type="text"
class="inputItem0"
data-index="0"
maxlength="1"
autofocus
/>
<input type="text" class="inputItem1" data-index="1" maxlength="1" />
<input type="text" class="inputItem2" data-index="2" maxlength="1" />
<input type="text" class="inputItem3" data-index="3" maxlength="1" />
</div>
</div>
<script>
var inputArr = document.getElementsByTagName("input");
window.addEventListener("keyup", (e) => {
let curIndex = e.target.getAttribute("data-index"); //
// BackSpace
if (e && e.keyCode == 8) {
console.log(22222222222);
for (let j = 0; j <= 3; j++) {
inputArr[j].value = "";
inputArr[0].focus();
}
return;
}
console.log("e.keyCode", e.keyCode);
//
if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
console.log(1111111111);
inputArr[curIndex].value = "";
return false;
}
//
var str = "";
for (let j = 0; j <= 3; j++) {
console.log(inputArr[j].value);
str += inputArr[j].value;
}
var nextIndex = Number(curIndex) + 1;
//
if (curIndex < 3 && str.length < 4) {
for (let i = 0; i <= curIndex; i++) {
// ， ， ，
if (!inputArr[i].value) {
inputArr[curIndex].blur();
inputArr[i].value = inputArr[curIndex].value;
var index = i + 1;
inputArr[index].focus();
inputArr[curIndex].value = "";
return;
} else {
var nextIndex = Number(curIndex) + 1;
inputArr[nextIndex].focus();
}
}
} else {
alert(" " + str);
//
}
});
</script>
</body>
</html>js 문자 인증 코드 입력 상 자 를 수 동 으로 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 js 문자 인증 코드 입력 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
