Otp 입력 필드 Html Css Javascript 생성( 소스 코드)

Otp 입력 필드 Html Css Javascript 생성( 소스 코드)

2022-10-19 last update

5 minutes reading beginners programming webdev javascript
codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 html css javascript를 사용하여 Otp 입력 필드를 만듭니다. Otp 입력 필드의 전체 코드를 제공합니다.

Otp 입력 필드를 만드는 방법을 배웁니다. Otp 입력란은 html, css, javascript를 사용합니다. 블로그를 즐기시기 바라며 Otp 입력 필드에 대한 기본 html 구조부터 시작하겠습니다.

Otp 입력 필드에 대한 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP Input</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="prompt">
Enter the code generated on your mobile device below to log in!
</div>
<form method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
<input type="text" id="digit-1" name="digit-1" data-next="digit-2" />
<input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" />
<input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" />
<input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>


OTP 입력 필드에 대한 모든 HTML 코드가 있습니다. 이제 Otp 입력 필드로 출력을 볼 수 있으며 Otp 입력 필드에 대해 Css와 javascript를 작성합니다.

산출

검토 - 해당 사항 없음
홈페이지에서 미리보기 가능
Click here

Otp 입력 필드의 CSS 코드

@import url('https://fonts.googleapis.com/css?family=Raleway:200');
body, html {
height: 100%;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {
background-color: #0f0f1a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.digit-group input {
width: 30px;
height: 50px;
background-color: #18182a;
border: none;
line-height: 50px;
text-align: center;
font-size: 24px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
color: white;
margin: 0 2px;
}
.digit-group .splitter {
padding: 0 5px;
color: white;
font-size: 24px;
}
.prompt {
margin-bottom: 20px;
font-size: 20px;
color: white;
}


OTP 입력 필드에 대한 모든 CSS 코드가 있습니다. 이제 CSS Otp 입력 필드로 출력을 볼 수 있으며 Otp 입력 필드 기능을 위한 자바스크립트를 작성합니다.

Otp 입력 필드에 대한 CSS 업데이트된 출력

검토 - 해당 사항 없음
홈페이지에서 미리보기 가능
Click here

Otp 입력 필드에 대한 Javascript 코드

$('.digit-group').find('input').each(function() {
$(this).attr('maxlength', 1);
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if(e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if(prev.length) {
$(prev).select();
}
} else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if(next.length) {
$(next).select();
} else {
if(parent.data('autosubmit')) {
parent.submit();
}
}
}
});
});


Otp 입력 필드의 최종 출력



이제 자바스크립트 섹션을 완료했으므로 자바스크립트로 업데이트된 출력은 다음과 같습니다. html, css 및 javascript가 포함된 OTP 입력 필드가 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다!

작성자 – Random/Anki가 있는 코드

코드 작성자 – Vassal Dave

일부 관련 주제 -

otp-input-field-html-css-otp-input-using-html-css-javascript

multi-step-form-multi-step-form-html-css-javascript-multi-step-form

create-header-html-create-header-html-css

make-calendar-using-html-css-javascript-