[JAVASCRIPT#08] input이벤트, onblur이벤트
목표 : input 태그에 입력을 하면 입력된 글자수를 span에 표시하는 것.
input 이란 어떤 입력이 발생한 것을 말한다. 입력 외에도 마우스로 눌렀다가 떼는 경우까지 모두 포함한다.
<script>
function calc(){
//입력창의 입력값을 불러와서 글자수를 세어 span에 출력
var input = document.querySelector("input[name=temp]");
var span = document.querySelector("input[name=temp]+span");
//console.log(input);
//console.log(span); ->잘 할수있을때까지 태그 확인 해보자.
// 입력글자를 span으로 옮겨보고, 입력글자 수를 span으로 옮겨보자.
//span.value = input.value;로 과거에 배울땐 카피를 했었다. 이것은 안된다. value는 "입력태그"만 가질 수 있다.
//때문에 text에 쳤을때는 되지만 옆에 출력되는 때는 value는 되지 않는다.
//속성이 아니라 내부의 글자를 변경하고 싶으면 .textXContent를 제어해야 한다.
//span.textContent = input.value; -> 복사가 된다.
span.textContent = input.value.length; -> 글자수를 세어준다.
}
</script>
</head>
<body>
<input type="text" name="temp" oninput="calc();">
<span>0</span>
<input type="text" name="temp2">
<span>0</span>
</body>
</html>
이 외에 onblur이벤트가있다.
회원가입의 경우에 필요한 이벤트인데,
oninput : 입력 발생시
onchange : 입력값의 변화 발생시
onblur : 입력창(칸)에서 다른 입력창(칸)으로 이동 시(focus-out)