목차
keyup() 예제 - 글자 입력 때마다 배경색 변경 keyup() 정의 keyup() 구문 keyup() 예제 - 입력 가능 최대 글자수 제한
keyup() 예제 - 글자 입력 때마다 배경색 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "tomato");
});
});
</script>
아이디: <input type="text">
결과보기
keyup() 정의
눌렸던 키보드 키가 위로 올리갈 때 이벤트 발생.
※ keyup() 메서드는 아래 2가지 작업 가능.
keyup 이벤트 촉발.
keyup 이벤트에 함수 부착.
cf.
keydown() 메서드
키보드 키가 밑으로 내려갈 때 이벤트 발생.
모든 키보드 키가 작동함.
keypress() 메서드
키보드 키가 눌려졌을 때 이벤트 발생.
모든 키보드 키가 작동하는 건 아님. (예: ALT, CTRL, SHIFT, ESC). keypress() 안 먹히는 키보드 키는 keydown()이나 keyup()으로 체크.
keyup() 메서드
키보드 키가 위로 올라갈 때 이벤트 발생.
모든 키보드 키가 작동함.
keyup() 구문
keyup 이벤트 촉발.
$(selector ).keyup()
keyup 이벤트에 함수 부착.
$(selector ).keyup(function )
[매개변수]
function
선택. keyup 이벤트 발생 시 실행할 함수 지정.
keyup() 예제 - 입력 가능 최대 글자수 제한
<?php
$max_length = 10; // 입력 가능 최대 글자수 설정
?>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.hz {width:600px;}
#counter {color:#aaa;}
</style>
<textarea id="hz" class="hz" name="hz" placeholder="<?php echo $max_length?>자 이내 입력 가능">
</textarea>
<br />
<span id="counter">(0 / 최대 <?php echo $max_length?>자)</span>
<script>
// 입력 가능 최대 글자수 체크
$('#hz').keyup(function (e){
var content = $(this).val ();
$('#counter').html ("("+content.length +" / 최대 <?php echo $max_length?>자)"); //글자수 실시간 카운팅
if (content.length > 10){
alert("최대 <?php echo $max_length?>자까지 입력 가능");
$(this).val(content.substring (0, <?php echo $max_length?>));
$('#counter').html("(<?php echo $max_length?> / 최대 <?php echo $max_length?>자)");
}
});
</script>
애드프로 님 (211116) https://sir.kr/qa/438739
PS. JavaScript 경우, https://homzzang.com/b/js-2003
