在輸入字段中重複計數字符的重用功能

Question

在我的應用程序中，我有很多需要驗證的表單。例如，當您輸入圖像的標題時，您可以鍵入10個字符，並且該字段旁邊顯示剩餘的字符數。

這些函數可以正常工作，但是我想將它用於很多不同類型的輸入字段，它們有不同的類和/或id。下面是功能（我使用的是一個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){ 
    ... 
}); 

DEMO HERE

我希望這有助於！