javascript - 如何使 FF 将字符插入到由 onkeypress 处理程序添加和聚焦的输入中？

我有一个带有 onkeypress 处理程序的页面，该处理程序插入 input 元素并将焦点设置在其上。

这个想法是，当用户开始输入时，输入会显示出来，并且文本会输入到这个新输入中。

这在 Chrome 67 和 IE 11 上运行良好，但在 FF (52.9.0) 上，键入的第一个字符(触发输入创建的字符)不会输入到输入中。

我认为其他浏览器的行为是正确的，因为根据 w3c example onkeypress 事件发生在“与此键相关的任何默认操作，例如向 DOM 中插入字符”之前，因此当执行默认操作时，新输入应该已经具有焦点。然而，这在 FF 中却行不通。

我已将问题简化为此测试用例:

<html>
<head>
   <script>
       var input = null;
       function cancelEdit() {
           document.body.removeChild(input);
           input = null;
       }
       function handleKeyPress(e) {
           if (input === null) {
               input = document.createElement("input");
               input.addEventListener("blur", cancelEdit);
               document.body.appendChild(input);
               input.focus();
           }
       }
    </script> 
</head>
<body onkeypress="handleKeyPress(event)">
    Press a key to start editing
</body>

这也可以用作 jsfiddle

现在的问题是:如何使其在 FF 中的行为与在其他浏览器中的行为相同？

我的浏览器版本:Chrome 67、IE 11、FF 52.9.0。全部运行在 Windows 7 上。

最佳答案

虽然我现在无法在 IE11 上进行测试。你可以尝试改变 onkeypress 到 onkeydown

在最新的 Chrome 和 Firefox 61 上进行了测试(在更改之前，问题被复制)

关于javascript - 如何使 FF 将字符插入到由 onkeypress 处理程序添加和聚焦的输入中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51821715/