2015-04-24 75 views
0

我有五個輸入字段是否有可能避免在此情況下

<input data-category="0" class="ncr_input" type="text" name="name" maxlength="25" id="t1cat" value="" placeholder="T1" autocomplete="off"/> 
<input data-category="1" class="ncr_input" type="text" maxlength="25" name="name" id="t2cat" value="" placeholder="T2" autocomplete="off" /> 
<input data-category="2" class="ncr_input" type="text" maxlength="25" name="name" id="t3cat" value="" placeholder="T4" autocomplete="off" /> 
<input data-category="3" class="ncr_input" type="text" maxlength="25" name="name" id="t4cat" value="" placeholder="T4" autocomplete="off" /> 
<input data-category="4" class="ncr_input" type="text" maxlength="25" name="name" id="t5cat" value="" placeholder="T4" autocomplete="off" /> 

我一定要限制在這五個文本字段中的某些共同特徵的重複代碼。

的一致風格onkeypress事件沒有在移動工作(但是在桌面瀏覽器工作正常)

所以我做它這樣

$(function() { 

$('#t1cat').keypress(function(evt) { 

    evt = (evt) ? evt : window.event; 
      var charCode = (evt.which) ? evt.which : evt.keyCode; 

      if (charCode ==37 || charCode ==38 ) { 
       return false; 
      } 
      return true; 
}); 


$('#t2cat').keypress(function(evt) { 

    evt = (evt) ? evt : window.event; 
      var charCode = (evt.which) ? evt.which : evt.keyCode; 

      if (charCode ==37 || charCode ==38 ) { 
       return false; 
      } 
      return true; 
}); 


similar code for t3cat t4cat and t5cat also 




}); 

這是工作正常,但我的問題是,有可能避免的重複代碼

回答

1

您可以用不同的方式jQuery選擇這樣做。

的一種方式是逗號分隔的ID列表:

$('#t1cat,#t2cat,#t2cat,#t3cat,#t5cat').on("keypress", function(evt) { 
    evt = (evt) ? evt : window.event; 
      var charCode = (evt.which) ? evt.which : evt.keyCode; 
      if (charCode ==37 || charCode ==38 ) { 
       return false; 
      } 
      return true; 
}); 

另一種方法是從輸入使用一個共同的類,並使用該類作爲選擇器。如果只有這些投入有選擇,ncr_input:

$('.ncr_input').on("keypress", function(evt) { 
    evt = (evt) ? evt : window.event; 
      var charCode = (evt.which) ? evt.which : evt.keyCode; 
      if (charCode ==37 || charCode ==38 ) { 
       return false; 
      } 
      return true; 
}); 

如果類是在其他地方使用,也只需要將未在別處使用的類名。

0

純JavaScript解決方案:

爲了避免重複,你可能需要使用onkeypress Event

<input data-category="0" onkeypress="return restrictCharacters(event);" class="ncr_input" type="text" name="name" maxlength="25" id="t1cat" value="" placeholder="T1" autocomplete="off"/> 
<input data-category="1" onkeypress="return restrictCharacters(event);" class="ncr_input" type="text" maxlength="25" name="name" id="t2cat" value="" placeholder="T2" autocomplete="off" /> 
<input data-category="2" onkeypress="return restrictCharacters(event);" class="ncr_input" type="text" maxlength="25" name="name" id="t3cat" value="" placeholder="T4" autocomplete="off" /> 
<input data-category="3" onkeypress="return restrictCharacters(event);" class="ncr_input" type="text" maxlength="25" name="name" id="t4cat" value="" placeholder="T4" autocomplete="off" /> 
<input data-category="4" onkeypress="return restrictCharacters(event);" class="ncr_input" type="text" maxlength="25" name="name" id="t5cat" value="" placeholder="T4" autocomplete="off" /> 


function restrictCharacters(e) { 
    if (!e) var e = window.event 
    if (e.keyCode) code = e.keyCode; 
    else if (e.which) code = e.which; 
    // if they pressed % or &... remove focus from field... 
     if (code==37 || code==38) { this.blur(); return false; } 

} 

DEMO

相關問題