JavaScript: onchange, onkeyup, blur

onchange event is triggered when the input field loses focus and its value has been changed.

예시)

<div class="Sans form-floating text-muted mb-3 is-invalid">
    <input class="form-control" name="password" id="password"
        placeholder="비밀번호" type="password" required
        pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"
        onchange="validatePassword()" />
    <label for="password">비밀번호 (영문 숫자 특수문자 조합, 8자리 이상)</label>
    <div class="valid-feedback">좋아요!</div>
    <div class="invalid-feedback">영문자, 숫자, 특수기호 조합으로 8자 이상으로
        입력하세요.</div>
</div>

//비밀번호 체크
console.log("Password check connect");
function validatePassword() {
	const passwordInput = document.getElementById("password");
	if (!passwordInput.checkValidity()) {
		passwordInput.classList.add("is-invalid");
		passwordInput.classList.remove("is-valid");
	} else {
		passwordInput.classList.add("is-valid");
		passwordInput.classList.remove("is-invalid");
	}
}

onkeyup event is triggered when a key is released after being pressed down while the input field has focus.

blur event is triggered when the input field loses focus.

---

참고: https://coding-restaurant.tistory.com/233

---