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

Merging two simple javascript functions into one

本文关键字：合并 一个 函数 简单 两个 javascript      更新时间：2023-09-26

在我的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";
    }
});

什么是最优雅(最有效?)的方式将这些合并到一个单一的函数?

工作演示: 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');
});

要保持在输入>max值时显示最大值的行为，请参见此更新: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 +修改器等都因为没有考虑周全的键阻塞而无法工作。除非经过深思熟虑，否则这是可用性的灾难，而在表单和验证方面，深思熟虑通常是很少的。

为什么不将整个登录移到isNumberKey函数中呢?通过将字符笔画合并到输入值来构建待处理的值，以检查它是否在范围内，并使"minute"单词在语法上正确，然后返回false以防止传播，仅依赖于您显式设置的内容。

相关文章：