front-end/JQuery
제이쿼리 붙여넣기 이벤트 감지하기
이안_ian
2022. 3. 22. 11:01
반응형
앱에서 <textarea>에 붙여넣기 시 텍스트 카운트가 안되는 현상이 있습니다.
이와 같은 이유로는 보통 PC환경에서는 keyup이나 blur 이벤트로 실시간 텍스트 카운트 처리를 하게 되는데 모바일 환경에서도 같은 소스를 적용시키기 때문입니다.
keyup이기때문에 아무래도 모바일의 키패드가 나와서 눌러줘야 keyup이벤트가 발생하는것으로 보이며 이와 관련해서는 다른 처리가 필요합니다.
그것은 keyup 이벤트를 미리 구현해 놓고 bind 함수를 통해서 keyup 이벤트를 트리거하여 처리가 가능합니다.
$("#inputTextarea").on('keyup', function(e) {
e.preventDefault();
var content = $(this).val();
$(".inputWrap .count").text(content.length + '/300');
if(content.length > 300){
$(this).val(content.substring(0, 300));
}
});
여기까지는 keyup 이벤트를 활용해서 카운트 처리!
$("#inputTextarea").bind('paste', function() {
$(this).trigger('keyup');
});
이렇게 사용할 수 있으며 잘 안될 경우에는 아래와 같은 코드도 같이 사용하면 좋을것 같습니다.
$("#inputTextarea").bind('paste', function(e) {
var el = $(this);
setTimeout(function(){
var textCnt = el.val();
alert(text);
},100);
});
출처
https://blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=vucket&logNo=220981510761
https://haandol.wordpress.com/2013/08/23/jquery%EB%A1%9C-ctrlv-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9E%A1%EC%95%84%EB%82%B4%EA%B8%B0/
반응형