12byte를 초과하면 작성이 더는 안되게 해달라는 요구사항의 작업을 하였다.
코드
$(function(){
// byte 체크 할 타겟 (input, textarea)
var $target = $('#name');
// 값이 들어올때는 input, 커서가 들어오고 나갈때는 focus, focusout
$target.on('input focus focusout', function(){
bytesValidationChk($(this),12); // 12자까지
});
// 체크 함수
function bytesValidationChk(target, maxByte) {
// byte 체크 할 때 사용하는 함수들 선언
var returnVal = '';
var currentLength = 0;
var codeByte = 0;
// input의 value
var targetVal = target.val();
// input.length만큼 반복
for(var i = 0; i < targetVal.length; i++){
// 한글, 영문 등의 byte만큼 codeByte를 증가
var oneChar = escape(targetVal.charAt(i));
// 한글 = 2byte 나머지 = 1byte
if(oneChar.length > 4) {
codeByte += 2;
}else {
codeByte++;
}
// length 체크
// codeByte 값이 내가 지정한 maxByte보다 작을 때 = currentLength 값을 1씩 증가
if(codeByte <= maxByte) {
currentLength = i + 1;
}
}
// codyByte가 내가 지정한 maxByte보다 커지면
if(codeByte >= maxByte){
// currentLength만큼 targetVal를 잘라줘서 returnVal에 담아줌
returnVal = targetVal.substr(0, currentLength); // 한글로 12byte면 currentLength가 6임
// maxByte만큼 자른 returnVal를 target(input)에 value로 넣어줌
target.val(returnVal) ;
}
} // bytesValidationChk
});
여기서 문제가 된건....
ie8에서 input 이벤트가 적용되지 않는 것이었다.
(focus와 상관 없이 자판을 쳤을때 체크해서 복+붙 시에도 체크가 가능해야 했다)
따라서 key 이벤트를 당연히.. 넣어줬어야 했는데, 이렇게 되면 ctrl+a(전체선택)이 적용되지 않는다.
큰 문제는 아니지만, 누군가는 당연히 복+붙을 할터이니.. 이슈로 돌아올게 분명하다.
+ firefox 버전 61.0.1(2018.07.11 기준으로 최신)에서는 한글에 key 이벤트 적용이 안된다.
과거부터 있던 이슈라는데, 한글이 완성형 글자라서 그러느니 뭐라느니, 그래서 이때는 input태그를 필수로 사용했다.★
그래서 처음 해본게.
value값을 새로 넣는게 아니라 target.attr('maxlength')값에 접근해서 cuttrneLength값을 넣어주는 방법도 했는데,
이 방법은 복+붙 시에 완전히 적용되지 않더라...
(byte가 maxByte가 되면 maxlength 추가, 아니면 제거 형식)
그래서 그냥 ie8은 key이벤트를 추가하여.. ctrl+a를 포기하기로 했다. (이 이하는 아몰랑)
마우스로 드래그하면 적용이 되니까....(흑흑)
수정된 코드이다.
$(function(){
var $linkBtnInput = $('.domain-link-btn-wrap').find('.link-input');
// 링크 이벤트를 기본으로 선언...
var linkEvent = 'input focus focusout';
// 브라우저 property를 사용해서 버전을 return받고
var isIE = function(){
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
};
// 비교하여 ie8이면 이벤트를 재 선언한다..
if (isIE () == 8) linkEvent = 'input keyup focus focusout';
// 아래는 위와 같다.
$linkBtnInput.on(linkEvent, function(){
bytesValidationChk($(this),12);
});
function bytesValidationChk(target,maxByte){
var returnVal = '';
var currentLength = 0;
var codeByte = 0;
var targetVal = target.val();
for (var i = 0; i < targetVal.length; i++) {
var oneChar = escape(targetVal.charAt(i));
if(oneChar.length > 4) {
codeByte += 2;
}else{
codeByte++;
}
if(codeByte <= maxByte){
currentLength = i + 1;
}
}
if(codeByte >= maxByte){
returnVal = targetVal.substr(0,currentLength);
target.val(returnVal);
}
}
});
더 좋은 방법을 알았으면 좋겠다 (헝헝 ㅠㅠ)