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 元素？还是它指向浏览器中的窗口对象？还有传递给匿名函数的“事件”参数是什么？

• this 指的是输入元素
• 它不是匿名函数，它是onkeypress 函数的声明
• event是上述函数more info的参数

意外（？）行为是因为代码在输入字段更新之前执行，所以只有前一个值被大写。为避免这种情况，您可以使用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 在 cmets 中提出 oninput，因为它确实是现代浏览器的最佳解决方案 请注意它仅支持 HTML5，您无法获取密钥代码等信息, 标识符等...

Answer 2

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

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

onkeydown onkeypress onkeyup 注意：onkeypress 事件不会被触发 适用于所有浏览器中的所有键（例如 ALT、CTRL、SHIFT、ESC）。检测 仅用户是否按下了键，使用 onkeydown 代替， 因为它适用于所有键。

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

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

oninput 比“次佳”的 onkeyup 更适合您的需求，因为 onkeyup 仅在释放键时触发。当您键入时，一旦按下它就会输入新值，但是它似乎在函数触发后将新值添加到框中。我将继续试验，因为我对如何做到这一点有另一个想法，但 oninput 似乎是目前最好的关键事件。

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

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

更新

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

这是另一个代码sn-p....

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

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