javascript - knockout - 限制输入仅包含一位小数点的数字

Question

我有下面的代码，它确实将输入限制为仅数字和选定数量的组合键。但我还想限制输入只接受一位小数点。

number: {
            init: function (element) {
                // Allows only numbers with decimals
                $(element).on("keydown", function (event) {
                    // Allow: backspace, delete, tab, escape, and enter
                    if (event.keyCode === 46 || event.keyCode === 8 || event.keyCode === 9 || event.keyCode === 27 || event.keyCode === 13 ||
                        // Allow: Ctrl+A, Ctrl + C, Ctrl + V, Ctrl + X
                        ((event.keyCode === 65 || event.keyCode === 67 || event.keyCode === 86 || event.keyCode === 88) && (event.ctrlKey === true || event.metaKey === true)) ||
                        // Allow: .
                        (event.keyCode === 190 || event.keyCode === 110) ||
                        // Allow: home, end, left, right
                        (event.keyCode >= 35 && event.keyCode <= 39)) {
                        // let it happen, don't do anything
                        return;
                    } else {
                        // Ensure that it is a number and stop the keypress
                        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                            event.preventDefault();
                        }
                    }
                });
            }
        }

我尝试添加 '$(element).val().indexOf('.') !== -1' 如下所示，但它没有执行任何操作，我仍然可以输入我想要多少个周期。我实际上应该如何限制它？

if (event.shiftKey || ($(element).val().indexOf('.') !== -1 && (event.keyCode === 190 || event.keyCode === 110)) || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
                        }

Answer 1

所以我必须说我并没有真正看到显式允许的逻辑；相反，您应该明确排除，因为默认情况下一切都是允许的。你买一台电脑是在它满足了你所有的标准之后才买的，你不会买10台电脑，然后扔掉那些不符合你标准的电脑。因此，无需触摸 Ctrl 和其他功能键，这会让事情变得不必要的复杂。
如果您仔细查看极长的 if 子句，您会注意到以下内容:
(event.keyCode === 190，其中您声明了 //让它发生，不要做任何事情。因此无论如何都会添加句​​点。以下是当前方法的陷阱:

• 通过 keydown 事件，无论 Caps Lock 是否开启，所有键码都会产生相同的值，因为它们是相同的>键。因此您无法区分句点 . 和分号 ;.
• 对于 keydown 事件，数字键盘和键盘上的相同数字的键码不同，因为它们是不同的键。
• 禁用 Shift 键(就像您所做的那样)会强制 AZERTY 用户使用 Caps Lock，因为 AZERTY 键盘在 Shift 关闭时会生成非数字字符。

因此，您最好使用 keypress 事件，该事件返回字符值。这是一个重构且更加简洁的函数，它实现了完全相同的功能:

 $('#jquery').on("keypress", function (event) {
   var k = event.keyCode || event.charCode;
   if (k === 46 && this.value.match(/\./g) || (k < 48 && k !== 46 ) || k > 57) {                            
     event.preventDefault();
   }
 });

在这里测试一下:http://jsfiddle.net/kevinvanlierde/5ay3cory/6/

注意:因为 Mozilla Firefox 在区分 keydown 和 keypress 方面很糟糕，所以它会搞乱并禁用所有控制键。