728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/keyup1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>key이벤트</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//$("h1").text() : h1태그 내부의 문자열.
//$("h1").html() : h1태그 내부의 문자열. html 분석기능 추가. 태그 사용 가능.
//$("h1").html("<p>100</p>")
let num1 = $("h1").text(); //h1태그 내부의 문자열 조회
/*
key이벤트 : 키보드에서 키를 누를 때 발생되는 이벤트
keydown : 키를 누를 때 발생되는 이벤트 함수
keypress : 키를 누르고 있는 상태에서 발생되는 이벤트 함수
keyup : 키에서 손을 땔 때. 키가 올라올때 발생되는 이벤트 함수
*/
$("textarea").keyup(function(){
//$("textarea").val() : textarea태그에 입력된 값
//$("textarea").val().length : textarea태그에 입력된 값의 길이
let num2 = num1 - $("textarea").val().length;
$("#remainnum").html(num2); //h1태그의 내부에 num2 값을 저장
if(num2 < 0)
$("h1").css("color", "red"); //글자색을 빨강색으로
else
$("h1").css("color", "black"); //글자색을 검정색으로
})
})
</script>
</head>
<body>
<p>글쓰기</p>
<h1 id="remainnum">100</h1>
<textarea rows="10" cols="70"></textarea>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery table ($(this).index(), $(this).parent().children().index(this), td:nth-of-type()) (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery key1 (inputarr, <div id="card">) (0) | 2022.04.25 |
| [Jquery] 21. Jquery exam1 (제출버튼 클릭시 입력된 이름과 비밀번호를 alert창에 띄우기) (0) | 2022.04.25 |
| [Jquery] 21. Jquery event4 (stopPropagation, preventDefault) (0) | 2022.04.25 |
| [Jquery] 21. Jquery event3 (setInterval) (0) | 2022.04.25 |