使用'this'关键字的事件处理程序未按预期工作

Question

标题可能不正确，但我不知道该怎么问！ 我遇到了与this关键字有关的问题。 在此代码中使用<input type="text" onkeyup="this.value=this.value.toUpperCase();"></input>它可以完美运行。 但是当我在使用this关键字的输入元素上分配一个函数时，它不能像
的HTML

<input type="text" onkeyup="up();"></input>

Java脚本

function up()
{   
    this.value=this.value.toUpperCase();
}

Answer 1

这不是元素，您需要从DOM传递它，像这样使用它

<input type="text" onkeyup="up(this);"></input>

你的职能

function up(el)
{   
    el.value=el.value.toUpperCase();
}

Answer 2

您还可以使用JavaScript提供的可能最可怕的东西：

onclick="up.call(this);"

call(...)基本上将函数内部的this设置为特定值，在这种情况下为元素。

Answer 3

尝试使用功能扩展DOM元素原型：

 HTMLInputElement.prototype.up = function() { if(this.type == "text") { this.value = this.value.toUpperCase(); } }; 

 <input type="text" onkeyup="up();" placeholder="type something" /> 

但我强烈建议您为此使用jquery，因为我认为HTMLInputElement不会在所有浏览器上始终存在：

 $(function(){ $('input.to-uppercase') .on('keyup', function(){$(this).val($(this).val().toUpperCase());}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="to-uppercase" placeholder="write something">