onKeyPress函数未立即调用

onKeyPress Function Not Being Called Immediately

本文关键字：调用 函数 onKeyPress      更新时间：2023-09-26

    document.getElementById('my').onkeypress = function(event) {
      this.value = this.value.toUpperCase()
    }
    <input id='my' type="text">

有人能向我解释一下上面代码中this变量指向什么吗？它是否指向我从document.getElementById('my)中获取的输入html元素？或者它指向浏览器中的窗口对象？此外，传递给匿名函数的event参数是什么？

出于某种原因，当我运行此代码时，除了最后一个字符外，每个字符的值都是大写的。例如，当我输入：a.字符a不是立即大写的，它只是在我输入另一个字母时才大写。例如：Ab。现在b不大写，直到我在b:ABc后面输入另一个字母。这种情况还在继续。有人能解释一下为什么会发生这种情况吗？

有人能向我解释一下上面代码中这个变量指向什么吗？它是否指向我从document.getElementById（'my）中获取的输入html元素？或者它指向浏览器中的窗口对象？此外，传递给匿名函数的"event"参数是什么？

  • this表示输入元素
  • 它不是一个匿名函数，它是onkeypress函数的声明
  • event是上述函数的参数

意外的（？）行为是因为代码是在输入字段更新之前执行的，所以只有前一个值会变为大写。为了避免这种情况，您可以使用onkeyup事件，该事件在释放密钥后触发。

点击此处查看：

document.getElementById('my').onkeypress = function(event) {
  this.value = this.value.toUpperCase()
}
document.getElementById('my2').onkeyup = function(event) {
  this.value = this.value.toUpperCase()
}
document.getElementById('my3').oninput = function(event) {
  this.value = this.value.toUpperCase()
}
<input id='my' type="text" placeholder="onkeypress">
<input id='my2' type="text" placeholder="onkeyup">
<input id='my3' type="text" placeholder="oninput">

感谢@www139在评论中提到oninput，因为它确实是现代浏览器的最佳解决方案请注意，它只是HTML5，您无法获得密钥代码、标识符等信息

以下是w3c中关键事件引用的简单定义。

提示：与按键事件相关的事件顺序：

onkeydown onkeypress onkeyup注意：onkeypress事件未触发用于所有浏览器中的所有键（如ALT、CTRL、SHIFT、ESC）。检测仅当用户是否按下了某个键时才使用onkeydown，因为它适用于所有键。

这解释了oninput事件；http://help.dottoro.com/ljhxklln.php

oninput事件支持所有主流浏览器，包括IE 9及更高版本。

oninput比"第二好"的onkeyup更适合您的需求，因为onkeyup只有在释放密钥时才会触发。当您键入时，一按下就会输入新值，但在函数启动后，它似乎会将新值添加到框中。我会继续实验，因为我对如何做到这一点有另一个想法，但目前看来，输入似乎是最好的关键事件。

document.getElementById('my').oninput = function(event) {
  this.value = this.value.toUpperCase()
}
<input id='my' type="text">

更新

实际上，您仍然可以使用onkeypress事件，但在执行函数之前，您需要使用超时来等待新值插入到文本框中。

这是另一个代码片段。。。。

document.getElementById('my').onkeypress = function(event) {
  var elem = this;
  window.setTimeout(function() {
    elem.value = elem.value.toUpperCase()
  }, 0);
}
<input id='my' type="text">

相关文章：