如何防止在页面重新加载时将 F5 输入到 html 输入中

Question

我正在制作一个计算器应用程序，我在文档中添加了一个事件监听器来监听数字按键，如下所示：

    function listenForKeyPress() {
       // add document event listener for all key presses
       document.addEventListener('keyup', (e) => {
          // check to see if the keypress was a number
          if (/[0-9-+-\--.]/g.test(e.key)) {
             // check to see if the input is not already focused
             if (document.activeElement !== input) {
                // focus element
                input.focus();
                // focus value
                input.value += e.key;
             }
          }
      })
    }

    // call function
    listenForKeyPress();

问题是当我使用 F5 刷新页面时，我将 F5 输入到输入元素中，如下所示：

我怎样才能防止这种情况发生，提前致谢。

Answer 1

我认为你可以像这样修改你的正则表达式：

1. 仅匹配一个字符，以 ^ 开头，以 $ 结尾并删除全局 /g 标志
2. [0-9-+-\\--.]很奇怪，因为它匹配-两次，还有范围“+”到“-”（字符代码 43 到 45）。 我认为您希望[\\d-+*\\/.]匹配数字（ \\d ）、运算符之一+-*/或点。

这使 ：

const regex = /^[\d-+*\/.]$/;

regex.test("F5"); // false
regex.test("a"); // false
regex.test("5"); // true
regex.test("+"); // true

Answer 2

我通常使用isNaN(+variable)作为检查字符串中的数字。 正则表达式对于这么简单的任务来说太昂贵了。

 ['-5', '5', 'F5', ' 5'].forEach(value => { const valueAsNumber = +value; console.log(`"${value}" is ${isNaN(valueAsNumber) ? 'not' : ''} a number. (${valueAsNumber})`); })