防止输入文本框中的退格答案

【问题标题】：Prevent backspace in input text box防止输入文本框中的退格
【发布时间】：2016-03-08 13:42:06
【问题描述】：

我正在制作一个测试打字速度的 Web 应用程序。

它为用户提供了一些要输入的文本，以及一个要输入的输入框。如果用户键入了错误的键，我在生成的键事件上使用preventDefault 以防止在输入框中输入错误的字符（我改为向用户显示错误消息）。

问题是，preventDefault 不会阻止输入退格键。理想情况下，由于永远不会在文本框中输入错误的按键，因此允许退格是没有意义的。如果用户习惯性地在感知错误时按退格键，则会导致输入框中的文本变得不正确。这不会影响测试的结果，只是不是一个理想的情况。

如何防止“文本”类型的 HTML5 输入元素中的退格？

【问题讨论】：

你真的需要防止退格吗？另一种方法可能是检测它何时发生，然后将输入元素的框替换为“应该”在那里。
@Brandin 我不需要，但我愿意。我试过了，但是按键处理程序会触发 before 文本放置在框中，所以我不能简单地替换退格键，因为直到处理程序触发后它才会被删除.

标签： javascript html dom-events input-field

【解决方案1】：

您需要检测 onkeydown 而不是 onkeypress，它应该可以工作（在 Firefox/Safari 上测试）。在某些浏览器上，onkeypress 仅限于可打印字符，而 onkeydown 则适用于所有按键事件。

<!doctype html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function no_backspaces(event)
            {
                backspace = 8;
                if (event.keyCode == backspace) event.preventDefault();
            }
        </script>
    </head>
    <body>
        <input id="typeHere" onkeydown="no_backspaces(event);"/>
    </body>
</html>

【讨论】：

谢谢。但它最终变得稍微复杂一些，因为如果你使用onkeydown，你必须手动将字母大写。我最终附加了两个处理程序，对可打印字符使用onkeypress，对不可打印字符使用onkeydown。到目前为止似乎按预期工作。