onblur
: focusμμ λ²μ΄λ¬μ λ μλλ¨css
* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div { width: 400px; margin: 150px auto; padding: 2px; border: 3px solid #7170b4; border-radius: 15px; }
h1 { margin: 10px 0; text-align: center; }
h2 { color: #5f689e; margin-bottom: 30px; text-align: center; }
h1 img { width: 150px; }
/* μ¬μ©μ μ§μ */
#feedback_wrap { height: 30px; }
#feedback {
padding-left: 30px;
background: url("../img/event_alarm.png") no-repeat;
}
form {
padding: 0 50px 20px; /* μ μ’μ° ν */
}
label {
display: block;
padding: 20px 0 5px;
}
input[type="text"],
input[type="pw"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
}
input[type="text"]:focus,
input[type="pw"]:focus {
outline: none;
background: #e7f6ff;
}
.submit {
padding-top: 10px;
text-align: right;
}
input[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
background: #849dca;
color: #fff;
}
input[type="submit"]:hover { background: #5f689e; }
html
<div id="page">
<h1><img src="./img/kiwi_icon.png" alt="" /></h1>
<h2>λ λ²μ§Έ μ λͺ©</h2>
<form action="">
<div id="feedback_wrap">
<div id="feedback">νΌλλ°±μ΄ λ€μ΄κ°λ λΆλΆ</div>
</div>
<label for="username">μ¬μ©μ μ΄λ¦ : </label>
<input type="text" id="username"> <!-- labelμ μ°κ²° -->
<label for="pw">λΉλ°λ²νΈ : </label>
<input type="text" id="pw"> <!-- labelμ μ°κ²° -->
<div class="submit">
<input type="submit" value="LOG IN">
</div>
</form>
</div>
js
//μμ 1 - html νκ·Έμ μ§μ μ¬μ©
// λͺ¨λ μμ μμ 곡ν΅μΌλ‘ μ¬μ©νλ λΆλΆ
const elName = document.getElementById("username");
const elMsg = document.getElementById("feedback");
let myName;
function checkName() {
// μμ 1 ~ 4μ ifλ¬Έ
if (elName.value.length < 5) {
elMsg.textContent = "μ΄λ¦μ 5κΈμ μ΄μ μ¨μ£ΌμΈμ";
}
// μμ 5μ ifλ¬Έ
myName = elName.value; // λ°μμ¨ μ
λ ₯ν λ΄μ©μ myName λ³μμ λ£λλ€.
if (elName.value.length < minLength) {
elMsg.textContent = `${myName}λ, μ΄λ¦μ ${minLength}κΈμ μ΄μ μ¨μ£ΌμΈμ`;
}
}
// μμ 2 script μΆκ°. html νκ·Έμ onblur μμ λ μ¬μ©
// elName.onblur = checkName();
// ν¨μμ ()κ° μμΌλ©΄ μ΄λ²€νΈλ‘ μ€νλλ κ²μ΄ μλλΌ λ‘λλ λ ν¨μκ° λ°μλ¨
elName.onblur = checkName;
// μμ 3 script μΆκ°
elName.addEventListener("blur", checkName);
// Element.addEventListener("event", function);
// μμ 4 script μΆκ° (IE9μ΄ν λ²μ μ μ΄λ²€νΈ 리μ€λ)
// elName.addEventListener("event", function) - IE9 μ΄μ λ²μ
if (elName.addEventListener) { // μ΄λ²€νΈ 리μ€λλ₯Ό μΈμνμ λ
elName.addEventListener("blur", checkName)
} else {
elName.attachEvent("blur", checkName)
// attachEvent() : JS μ΄μ°½κΈ° Web API
}
// μμ 5 script μΆκ°
// elName.addEventListener("event", function) - IE9 μ΄μ λ²μ
elName.addEventListener("blur", function() {
checkName(myName, 7);
});
// ν¨μμ λ§€κ°λ³μκ° νμν λλ μ§μ ()λ₯Ό μΈ μ μμ΄μ function(){}μ μ΄μ©
// μμ 6 script μΆκ° - focus()
function autoFocus() {
elName.focus();
}
// νλ©΄μ΄ μ€νλ λ μλ
window.addEventListener("load", autoFocus);
// μλμ κ°μ μ½λ. μλ μ½λλ ν¨μλ₯Ό νλ²μ μ§μ ν κ²
// window.addEventListener("load", function() {
// elName.focus();
// });
μμ 1 ~ 4
μμ 5, 6