input byte체크

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);
    }
  }
  
});

더 좋은 방법을 알았으면 좋겠다 (헝헝 ㅠㅠ)