id와 password의 input에 한글자라도 입력되면 버튼 활성화시키기
//id입력 input
const idInput = document.getElementById("idInput");
//password입력 input
const pwInput = document.getElementById("pwInput");
//로그인 버튼
const loginBtn = document.getElementById("loginBtn");
//버튼 활성화시키는 함수 ableBtn
function ableBtn() {
//만약 inInput에 값이 존재하고 pwInput에도 값이 존재하면
if (idInput.value && pwInput.value) {
//로그인 버튼 disabled 속성 제거
loginBtn.disabled = false;
//로그인 버튼 색 진하게 변경
loginBtn.style.backgroundColor = "#0095F6";
//로그인 버튼 커서 모양 변경
loginBtn.style.cursor = "pointer";
//idInput에 값이 없거나 또는 pwInput에 값이 없다면
} else if (!idInput.value || !pwInput.value) {
//로그인 버튼 disabled 속성 추가
loginBtn.disabled = true;
//로그인 버튼 배경색 연하게 변경
loginBtn.style.backgroundColor = "#c4e1fb";
//로그인 버튼 커서 모양 변경
loginBtn.style.cursor = "default";
}
}
//idInput에서 키보드로 값을 입력 후 떼면 ableBtn 함수 실행
idInput.addEventListener("keyup", ableBtn);
//pwInput에서 키보드로 값을 입력 후 떼면 ableBtn 함수 실행
pwInput.addEventListener("keyup", ableBtn);onchange 이벤트
위 문제를 풀다가 새로 알게 된 이벤트이다. 위에서는 keyup을 사용했는데, onchange도 사용할 수 있지 않을까? 싶었지만 입력을 함과 동시에 활성화 시키기는 어려울 것 같아서 사용하지 못했다.
참고 : w3school-onchange
- on change 이벤트는 요소의 값이 변경되었을 때 발생한다.
<!DOCTYPE html>
<html>
<body>
영어 이름을 입력하세요! : <input type="text" id="fname">
</body>
</html>
document.getElementById("fname").addEventListener("change", myFunction);
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}- input에 영어이름을 입력하고 input칸을 떠나면 대문자로 변한다.
- input 밖 영역을 클릭하거나 입력 후 Enter키를 누르면 toUppercase()가 실행된다.
- html파일에서 태그 내에 직접 이벤트를 적용할 수 있다.
<input type="text" id="fname" onchange="myFunction()">
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧