html
<body>
<main>
<textarea class="textarea"></textarea>
<p>현재 <span class="string_num">0</span>글자를 입력하였습니다.</p>
</main>
</body>Css
.textarea {
width: 100%;
height: calc(100% - 40px);
font-size: 40px;
background-color: rgba(255, 255, 255, 0.9);
}
p {
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: -1px -1px 1px #333333, 1px 1px #ffffff;
margin: 0;
}Javascript
let textarea = document.querySelector(".textarea");
let string_num = document.querySelector(".string_num");
textarea.addEventListener("keyup", onKeyUp);
function onKeyUp() {
const inputText = textarea.value;
console.log(inputText);
string_num.innerText = inputText.length;
}
// 출력될공간 정의
// 몇글자인지 확인해 출력할 결과 공간 정의
// 키보드이벤트 종류 2가지 keyup : 눌렸다가 오르는 순간 , keydown : 눌려졌을때
// keydown -> 글자가 다 완성이안됨.
// 텍스트에어리어의 값(value)을 가져와 저장할 변수
// 결과공간에 innerText 로 변수의 길이값 넣기.
'Javascript > GMA(2302~)' 카테고리의 다른 글
| 230602 자바스크립트 배열객체 forEach로 출력하기 (0) | 2023.06.02 |
|---|---|
| 230530 자바스크립트 예제 - URL,URI 값 가져와서 출력하기 (location.search( ) / split( ) + 정규표현식 / filter( ) / decodeURIComponent( ) / (0) | 2023.05.30 |
| 230530 자바스크립트 예제 - 버튼클릭시 색상변경 (*setProperty / Math.random / hsl) (0) | 2023.05.30 |
| 230502 자바스크립트 캔버스 웹브라우저 안에서 움직이는 도형 만들기 (0) | 2023.05.18 |
| 230502 자바스크립트 캔버스 이용하여 움직이는 파티클 만들기 (0) | 2023.05.18 |
