Можно ли избежать дублирования кода в этом случае

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 селекторы по-разному.

Одним из способов является запятыми список идентификаторов:

$('#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