Question

    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之后输入另一个字母。这继续下去。有人可以解释为什么会这样吗？

Answer 1

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

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在评论中提出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更适合您的需求而不是＆＃34; second-best＆＃34; onkeyup因为onkeyup仅在释放密钥时触发。键入时，新值将在按下后立即输入，但似乎在函数触发后将新值添加到框中。我将继续进行实验，因为我对如何做到这一点有另一个想法，但此时输入似乎是目前最好的关键事件。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

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

这是另一个代码段....

＆＃13;

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

＆＃13;

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

＆＃13;

onKeyPress函数不立即被调用

2 个答案: