-
[JS] input 입력값 byte 체크 (키보드이벤트)JavaScript 2018. 12. 19. 14:14
<div class="ui input square" style="width: calc(100% - 400px); margin-right: 10px;">
<input class="text" type="text" placeholder="검색어를 입력하세요.">
<span>(<span class="bytes">0</span>/38 Byte)</span>
</div><script type="text/javascript">
//byte 체크
$('.text').keyup(function(){
bytesHandler(this);
});
function getTextLength(str) {
var len = 0;
for (var i = 0; i < str.length; i++) {
if (escape(str.charAt(i)).length == 6) {
len++;
}
len++;
}
return len;
}
function bytesHandler(obj){
var text = $(obj).val();
$('span.bytes').text(getTextLength(text));
}
</script>키보드 이벤트 발생 순서
keydown = keypress(문자가 입력될 때만 발생, 방향키/백스페이스/딜리트 x)
input
change
keyup
'JavaScript' 카테고리의 다른 글
[JS] 호이스팅 (0) 2019.08.02 [JS] jQuery .on() 이벤트 (0) 2018.12.11 [JS] jQuery .trigger() 함수 (이벤트/이벤트핸들러/함수 비교) (0) 2018.12.11 [JS] ES6 기본 (0) 2018.11.21 [JS] javascript 이벤트 버블링 (0) 2018.11.21 댓글