JQuery로 빈 입력 필드
Anika Tabassum Era
2024년2월15일
양식의 유효성을 검사한 후 데이터를 게시하거나 저장할 때 페이지를 새로 고쳐야 하는 경우가 많습니다. 이는 다음 사용자가 이전 사용자의 자격 증명을 가져올 수 있으므로 안전을 보장하기 위해 필요합니다.
잘 구성된 웹 페이지 및 양식에서 올바른 제출 후 입력 필드가 재설정되도록 합니다. 불행하게도 이 규칙도 너무 엄격하게 준수되기 때문에 제한된 세션 시간이 지나면 입력 필드가 유효하지 않게 되고 새로 고침이 필요합니다.
이 문서에서는 코드 예제를 사용하여 입력 필드를 지우는 데 널리 사용되는 접근 방식을 배웁니다. 장점은 구현하기 쉽다는 것입니다.
정의된 class 및 input[type]을 사용하여 입력 필드 지우기
여기서는 두 개의 입력 필드를 설정합니다. 하나는 text 유형이고 다른 하나는 password 유형입니다. 따라서 우리가 할 일은 제출을 보장하는 버튼을 만드는 것입니다.
버튼을 클릭할 때마다 특정 입력 필드가 지워집니다. 이제 코드 펜스로 점프해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
</script>
</html>
출력:
볼 수 있듯이 스크립트에서 jQuery("input[type='text']")가 시작되고 .val("")이 뒤따릅니다.
이것은 입력 필드가 처음에는 비어 있고 제출 후 재설정됨을 나타냅니다. 이 코드에서는 class="input"을 사용하여 입력 필드 텍스트의 이후 정리를 보완했습니다.
input[type]을 선택기로 사용하여 입력 필드 지우기
여기서는 $("input[type="password"]")를 $(:password)로 바꿉니다. 그리고 이 선택기는 이전과 동일한 작업을 수행합니다. 코드 스니펫으로 이동해 보겠습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
$(document).ready(function() {
$(":password").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(":password").val("");
});
});
</script>
</html>
출력:
