是否有可能避免在此情况下

Question

我有五个输入字段

<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 




}); 

这是工作正常，但我的问题是，有可能避免的重复代码

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

如果类是在其他地方使用，也只需要将未在别处使用的类名。

Answer 2

纯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