<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener('keyup', (event)=>{
const textarea = document.querySelector('textarea')
const h1 = document.querySelector('h1');
textarea.addEventListener('keyup', (event)=>{
const length = textarea.value.length;
h1.textContent = `글자 수: ${length}`;
})
})
</script>
</head>
<body>
<h1></h1>
<textarea></textarea>
</body>
</html>textarea에 keyup 이벤트속성을 사용하여 글자수를 세도록 하였다.
그러나 keyup으로 구현할 시, ㅁㅁㅁㅁㅁㅁ같이 계속 누르고 있는 글자수는 인식하지 못하는 문제가 있다.
또한 아시아권의 문자는 키보드 이벤트(keydown, keypress, keyup)로 원하는 것을 제대로 구현할 수 없는 경우가 많기때문에 트위터같은 경우 타이머를 사용해 50ms마다 입력양식내부의 글자를 확인해서 글자수를 센다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.querySelector('textarea');
const h1 = document.querySelector('h1');
let timerId;
textarea.addEventListener('focus', (event) => {
//입력양식 활성화
timerId = setInterval (() => {
const length = textarea.value.length;
h1.textContent = `글자 수: ${length}`;
}, 50)
})
textarea.addEventListener('blur', (event)=>{
//입력양식 비활성화
clearInterval(timerId)
})
})
</script>
</head>
<body>
<h1></h1>
<textarea></textarea>
</body>
</html>
누르는 순간에도 글자수를 인식해서 같이 올라간다
반응형
'개발 > Javascript' 카테고리의 다른 글
| [Vue] 템플릿 프로젝트 구성 (0) | 2022.08.18 |
|---|---|
| [Vue] HTTP 통신 (0) | 2022.08.17 |
| [Vue] 라우터 (2) | 2022.08.16 |
| [React] 페이지라우팅2 - React Router사용 (0) | 2022.08.01 |
| [Alpine] alpine.js 맛보기 (with 노마드코더) (0) | 2022.07.31 |