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">