退格键和 Ctrl + c（复制）不适用于输入字段（FireFox）

Question

我有一个使用语义 UI 输入字段开发的表单。我的要求是输入字段应该只接受数字，消除空格，并且应该允许从输入字段 ctrl +c 复制。

我做了一些研究，这个 jQuery 代码似乎符合我的要求，因为它在 Chrome 中运行良好。但是 FireFox 不允许我使用退格或复制功能。

这是我正在使用的 jQuery 代码；

$("#checker").on("keypress keyup blur", function(event) {

  $(this).val($(this).val().replace(/[^\d ].+/, ""));
  if ((event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
});

如何让它在 FireFox 中像在 chrome 中一样工作？

Answer 1

您可以使用单个regex 模式只允许数字，无需阻止其他键数字，它适用于 Chrome 和 FireFox 等。

$("#checker").on("keypress input blur", function(event) {

  var value = $(this).val();
  value = value.replace(/\D+/, '');
  $(this).val(value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="checker" />

Answer 2

您可以检测“ctrl”键，然后检测“c”键，在这种情况下，让事件按预期发生。否则，您会阻止该操作。

这是一个在 FireFox 中工作的未经修饰的示例。我相信它可以改进：

   $(function () {
        var ctrlDown = false,
            ctrlKey = 17,
            cKey = 67,
            backSpaceKey = 8;

        $("#checker").on("keydown keyup blur", function (event) {

            // Checks if 'ctrl' key was pressed and raises the flags
            if (event.which == ctrlKey) {
                ctrlDown = true;
            }

            // Checks if 'c' key was pressed, resets the ctrl key and continues to execute the copy action
            if (event.which == cKey) {
                ctrlDown = false;
            }
            else if ((event.which < 48 || event.which > 57) && (event.which != backSpaceKey)) {
                // Cancel any key and reset all flags
                event.preventDefault();
                ctrlDown = false;
            }

            $(this).val($(this).val().replace(/[^\d ].+/, ""));
        });
    });

如果您希望将其他键（例如箭头键）排除在预防之外，那么您可以将它们添加到“if”子句中，在该子句中我检查了“退格键”是否被按下，那么我不会阻止行动。

您也可以使用正则表达式来仅过滤数字而不处理所有其他键。它是由你决定。我认为 Regex 解决方案要好得多。