Question

我的index.html中有以下代码用于输入字段：

<input id="inpMinutes" type="number" style="width: 50px; text-align: right" min="1" value="1" onkeypress="return isNumberKey(event)" />
<span id="minuteS">minute</span>

我希望将输入的数字保持在1到600之间，而不允许输入任何非数字字符。这是由我的main.js文件中的2个不同的函数完成的，但是我想合并它们，但我在javascript上非常棒，我只是偷了并修改了这段代码。

// keep out non-digits from the input field that calls this
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

$("#inpMinutes").on("input", function() {
    // do not allow to enter a number less than 1 into the minutes field (minus sign is prevented by isNumberKey())
    if ( this.value == 0 ) {
        this.value = 1;
    // do not allow to enter a number larger than 600
    } else if ( this.value > 600 ) {
        this.value = 600;
    }
    // make the "minute" word grammatically correct
    if ( this.value > 1 ) {
        minuteS.innerHTML = "minutes";
    } else {
        minuteS.innerHTML = "minute";
    }
});

将这些功能合并为一个功能的最优雅（最有效？）方法是什么？提前谢谢。

Answer 1

工作演示：https://jsfiddle.net/20m6eLxx/

HTML

<input id="inpMinutes" type="number" min="1" value="1" data-oldvalue="1" data-regex="^([0-9]{1,2}|[1-5][0-9]{2}|600)$" />
<span id="minuteS">minute</span>

JS

$('#inpMinutes').on('input', function (e) {
    var $target = $(e.target),
            val = $target.val(),
            rgx = new RegExp($target.attr('data-regex'));

    if (!rgx.test(val)) {
        $target.val($target.attr('data-oldvalue'));
        return;
    }
    $target.attr('data-oldvalue', $target.val());
    $('#minuteS').html(val > 1 ? 'minutes' : 'minute');
});

要保留在输入＆gt;最大值时显示最大值的行为，请参阅此更新：https://jsfiddle.net/20m6eLxx/1/

<小时/> 如果您愿意，可以对此进行一般化处理，通过扩展选择器将其扩展到需要验证和限制键控的所有输入，例如：

//<input class="restricted others" data-regex="etc." />
$('.restricted').on('input', function (e) {...... 
or
//for any input that has the data-regex attribute
$('input[data-regex]').on('input', function (e) {......

一小段建议

除非你真的知道自己在做什么，否则请非常体贴地取消事件默认和冒泡。当标签，ctrl +修饰符等由于非常无意义的键阻塞而无法工作时，我已经破坏了一些键盘。除非经过深思熟虑，否则它是一种可用性灾难，在形式和验证（imho）方面经过深思熟虑通常很少见。

Answer 2

为什么不将整个登录名移动到isNumberKey函数。通过将字符笔划与输入值合并来构建成为值，以检查它是否保持在范围内并使＆＃34;分钟＆＃34;单词语法正确，然后返回false以防止传播，只依靠你明确设置的内容。

将两个简单的javascript函数合并为一个

2 个答案: