Otp 입력 필드 Html Css Javascript 만들기(소스 코드)
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 입력 필드 기능을 위한 자바스크립트를 작성합니다.
Op 입력 필드에 대한 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를 사용한 코드
코드 작성자 – Vatsal 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-
Reference
이 문제에 관하여(Otp 입력 필드 Html Css Javascript 만들기(소스 코드)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingtitan6/create-otp-input-field-html-css-javascript-source-code-50m1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
