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" />

我必须在这五个文本字段下限制某些常用字符。

inkey style 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

在这种情况下是否可以避免重复代码

2 个答案: