목표 : 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)
'JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT#09]정규표현식(Regular Expression) (0) | 2020.12.23 |
|---|---|
| [JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용 (0) | 2020.12.23 |
| [JAVASCRIPT#06]비밀번호 검사 (0) | 2020.12.23 |
| [JAVASCRIPT#05] 글자 복사 함수 (0) | 2020.12.22 |
| [JAVASCRIPT#04] 자바스크립트 함수, 함수 활용(태그제어) (0) | 2020.12.22 |