입력 필드의 문자를 계산하는 함수 재사용

Question

제 신청서에는 검증하고자하는 양식이 많이 있습니다. 예를 들어 이미지의 제목을 넣을 때 10자를 입력 할 수 있으며 왼쪽에 몇 개의 문자가 필드 옆에 표시되는지 나타낼 수 있습니다.

함수는 제대로 작동하지만 다른 형식의 많은 입력 필드에 다른 클래스 및/또는 ID가 사용되도록하고 싶습니다. 아래는 함수입니다. 키 입력으로 작동하지 않는 것처럼 보이기 때문에 backspace를 누르면 왼쪽에있는 문자 수를 업데이트하는 keyup을 사용하고 있습니다.

그래서 다른 클래스 (또는 id) 이름을 가진 입력 필드에 어떻게 이러한 함수를 재사용 할 수 있습니까?

$('.imageTitle').keypress(function(e) { 
     var value = $(this).val(), 
      valueLength = value.length; 
      set = 15, 
      remain = parseInt(set - valueLength); 

     if (remain <= 0 && e.which !== 0 && e.charCode !== 0) { 
      $('.imageTitle').val((value).substring(0, valueLength - 1)); 
     } 

     $('#titleCharsLeft').html('&nbsp; ' + remain + ' left'); 
    }); 

    $('.imageTitle').keyup(function(e) { 

     var value = $(this).val(), 
      valueLength = value.length; 
      set = 15, 
      remain = parseInt(set - valueLength); 

     if (e.keyCode == 8) { 
      $('.imageTitle').val((value).substring(0, valueLength - 1)); 
     } 

     $('#titleCharsLeft').html('&nbsp; ' + remain + ' left'); 
    }); 

Answer 1

다음은 대리인에게 기능을 추가하여 일부 사용자 지정 및 비 반복 코드를 제공하는 대체 데모입니다. 실제로 플러그인을 만들지 않고도이 방법을 사용할 수 있습니다.

http://jsfiddle.net/lucuma/effAF/2/

HTML : 당신은 내가 각 입력의 길이를 제어하는 ​​데이터 길이 속성을 추가 한 알 수 있습니다.

<div id="titleCharsLeft"></div> 

<form> 
    <input type="text" class="validateThis" data-length="10" /> 
    <input type="text" class="validateThis" data-length="15" /> 
    <input type="text" class="validateThis" data-length="10" /> 
    <input type="text" class="validateThis" data-length="10" /> 
</form>​ 

JS : 나는 on로 변경뿐만 아니라 행사에 호출되는 함수를했습니다.

function validateLength(el) { 
    console.log('hit'); 
    var $this = $(el); 
    var value = $this.val(), 
     valueLength = value.length; 
     set = parseInt($this.attr('data-length')); 
     remain = parseInt(set - valueLength); 

    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) { 
     $('.imageTitle').val((value).substring(0, valueLength - 1)); 
    } 

    $('#titleCharsLeft').html('&nbsp; ' + remain + ' left'); 
} 

$(document).on('keypress','input.validateThis',function(e){ 
    validateLength(this); 
}); 

$(document).on('keyup', 'input.validateThis',function(e){ 
    validateLength(this); 
}); 

Answer 2

같은) 당신이에 대해 확인하고자하는 입력 필드에 공통 클래스를 추가 한 다음 $의 .delegate를 (적용 고려해

HTML

<form> 
    <input class="validateThis" /> 
</form> 

jQuery

$(document).delegate('input.validateThis', 'keypress', function(e){ 
    ... 
}); 

$(document).delegate('input.validateThis', 'keyup', function(e){ 
    ... 
}); 

이 정보가 도움이되기를 바랍니다.