Jquery[제이쿼리] 이벤트[event]메서드 keyup 글자수 제한기능

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery]로 이벤트[event]메서드 keyup을 사용하여

쇼핑몰 후기의 글자수 제한 기능을 만들어 볼라고 해요.

위화면처럼 셋팅해주세요~

실행 화면입니다. ㅎㅎ 

===============================
$('textarea').keyup
===============================

'textarea'<== 대상으로 키보드를 눌럿다가 땟을 경우

===============================
var inputlength= $(this).val().length;
===============================
inputlength라는 변수에 
this <==keyup이벤트가 발생한 대상의 
val() <== 이벤트가 발생한 대상 value의값 즉 'textarea'의 value의
.length <== 길이를 inputlength변수에 담아라 라는 뜻입니다.
alert(); 함수를 사용하여 inputlength변수의 값을 찍어보도록 하겠습니다.

아직 'textarea'에 아무값도 입력을 안한 상태입니다.

a를 쭉 눌럿다가 때봤습니다 10개의 a가 찍혓네요
'textarea'의 value의 값의 총길이가 10이라서 경고창 메세지에 10이라는 숫자가
찍힌걸 확인할수있습니다.

이번에는 좀더 적어봤습니다 총 32개를 적었네요 ㅎㅎ

<h1>태그 안에 150이라는 숫자를 지정한 이유는
그냥 'textarea'의 글자수 제한을 150개로 하기위해서 입니다.
===============================
var remain=150- inputlength;
===============================
remain라는 변수에 150 <== 글자수 제한 150개 다르게 하실분들은 다르게 하셔도된답니다.
150- inputlength <== 위에서 inputlength 변수안의 값은 textarea의 value값의 길이였습니다.
그럼 textarea에 글자를 적을때마다 remain값이 작아지겠죠?ㅎㅎ

입력값이 없을때 입니다.

150에서 99로 줄어든 모습입니다.

이제 경고창이아닌 <h1>태그의 값을 변경 하도록 해볼까요?
===============================
$('h1').html(remain);
===============================
이제 설명 안해도 아시죠? 이해가 안가시면 댓글남겨주세요.

키보드를 눌럿다가 땔때마다 <h1>태그의 값이 변하는 모습입니다.

몇번더 눌러봤답니다 ㅎㅎ

150글자 이상 적으면 <h1>태그의 값이 -가 될꺼에요.
<h1>태그의 값이 -가 될떄는 글자색을 빨간색으로 지정해볼께요.
간단하게 if를 사용하여 구현해봤답니다.
실행해볼까요?

아직 150개 이상 안적어서 <h1>태그의 색이 검정색입니다.

150글자 이상 적으니 빨간색으로 변한 모습입니다. ㅎㅎ
오늘은 제이쿼리[jquery] 이벤트[event]메서드 keyup을 사용하여
글자수 제한기능을 만들어봤습니다.
그럼 다음에 또만나요~