如何取消 Escape 按钮对 html 输入的影响？答案

【问题标题】：Howto cancel the effects of the Escape button on an html input?如何取消 Escape 按钮对 html 输入的影响？
【发布时间】：2011-07-07 02:02:48
【问题描述】：

我正在构建一个 JavaScript 游戏，其中播放音频并根据您应该在一个大文本框中输入一些文本的音频。 JavaScript 用于对您的答案进行评分，然后清除文本框以准备下一个音频剪辑。

问题：在某些情况下，当焦点位于空的<input type="text" /> 时按下esc（escape）键时，文本框会填充一些旧文本。

我正在使用 MooTools，并尝试在 keypress、keydown 和 keyup 中使用 event.stop()（它停止传播并执行 preventDefault），但没有成功。

如何防止 [esc] 按钮更改文本框中的值？

（这很重要，因为我使用 [esc] 键作为键盘快捷键来重放音频）

【问题讨论】：

看来问题出在其他地方。取消 esc 可能无济于事。
注意：我在 Firefox 5 中注意到了这个问题
见this answer。添加阻止默认操作的 keydown 处理程序可以更好地解决此问题。

标签： javascript html input

【解决方案1】：

我可以通过在输入框中调用blur() 然后focus() 来解决此问题。这至少为我解决了 Firefox 中的问题。

【讨论】：

【解决方案2】：

有趣的问题 - 例如它发生在 IE 中，但不是 Chrome。这是我在 Chrome 和 IE 中测试过的解决方案（似乎可行）。

扩展版：

页眉中的脚本：

<script>
var buff; //Must have global scope
var input = document.getElementById("testinput"); //Defined here to save cpu (instead of on every key press).
function CheckPreBuff(e)
{
  var ev = window.event ? event : e; //Get the event object for IE or FF

  var unicode = (typeof(ev.keyCode) != "undefined")? ev.keyCode : ev.charCode;
  if(unicode != 27) buff = input.value; //The 'escape' key has a unicode value of 27
  else input.value = buff; //Only set the input contents when needed, so not to waste cpu.
}
</script>

'testinput' 是我们禁用转义的输入。测试输入 html 如下：

<input id="testinput" onkeypress="CheckPreBuff();" onkeyup="CheckPreBuff();" type="text"/>

注意“onkeyup”和“onkeypress”都被使用了——技术上只需要“onkeyup”，尽管使用“onkeypress”可以防止文本框在按下转义键时暂时变为空白。

手动缩小 + 错误预防 + 支持多输入（如果您愿意）

标题中的脚本：

<script>
var buff = [];
function InitCPB(obj){if(typeof(obj)=="undefined")return;buff[0]=obj;buff[1]="";obj.onkeypress=CPB;obj.onkeyup=CPB;}
function CPB(e){if(typeof((buff[0]))=="undefined")return;var ev=window.event?event:e;(((typeof(ev.keyCode)!="undefined")?ev.keyCode:ev.charCode)!=27)?buff[1]=(buff[0]).value:(buff[0]).value=buff[1];}
</script>

testinput html 标签（虽然不再需要 id）：

<input onfocus="InitCPB(this);" type="text"/>

这两种方法都会在按下下一个键之前保留文本输入的副本，如果按下的键是 'escape'，unicode 27，则将上一个文本输入放回文本框（这是有区别的，所以该脚本不会在每次按键时给浏览器增加太多负载）。

第二个版本允许在同一页面上禁用转义键的多个文本输入 - 只要它们具有如上所述的 onFocus 属性设置（多个元素不会相互干扰）。它还检查传递给它的对象是否已定义，以防止意外错误实现导致 IE 心脏病发作！

我希望这会有所帮助。

【讨论】：

【解决方案3】：

当检测到逃逸时，做需要做的事情，最后return false;

它为我解决了 Firefox 25 中的问题。

【讨论】：