无法立即调用onKeyPress函数

Question

  document.getElementById('my').onkeypress = function(event) { this.value = this.value.toUpperCase() } 

  <input id='my' type="text"> 

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

由于某种原因，当我运行此代码时，除最后一个字符外，每个字符的值均大写。 例如，当我输入： 字符a不会立即大写，仅当我输入另一个字母时才大写。 例如：Ab。 现在b不会大写，直到我在b之后输入另一个字母：ABc。 并继续下去。 有人可以解释为什么会这样吗？

Answer 1

有人可以向我解释一下以上代码中此变量指向的内容吗？ 它是否指向我从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，并且您无法获取键码，标识符等信息。

Answer 2

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

提示：与onkeypress事件相关的事件顺序：

onkeydown onkeypress onkeyup注意：在所有浏览器中，不会为所有键（例如ALT，CTRL，SHIFT，ESC）触发onkeypress事件。 要仅检测用户是否已按下某个键，请改用onkeydown，因为它适用于所有键。

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

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

与“次优” onkeyup相比，oninput更适合您的需求，因为onkeyup仅在释放键时才触发。 当您键入时，新值一被按下就被输入，但是似乎在函数触发后将新值添加到框中。 我将继续尝试，因为我对如何执行此操作有另一个想法，但是oninput似乎是目前最好的关键事件。

 document.getElementById('my').oninput = function(event) { this.value = this.value.toUpperCase() } 

 <input id='my' type="text"> 

UPDATE

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

这是另一个代码段。

 document.getElementById('my').onkeypress = function(event) { var elem = this; window.setTimeout(function() { elem.value = elem.value.toUpperCase() }, 0); } 

 <input id='my' type="text">