Question

我知道这个问题已被多次询问和回答。但是我发现了一个新的解决方案 - 但并不完全理解它。设置如下：

<input id="input1" onchange="GetText()"/>

我发现的所有答案都建议使用id来获取输入的值。

function GetText(){
  alert($("#input1").val());
}

$（this）.val（）在这里不起作用。

使用＃input1值的另一种方法是在调用函数中使用this.value：

<input id="input1" onchange="GetText(this.value)" />

这会将值作为参数传递给函数。

但是我发现了一个JQuery示例，它将一个函数附加到＃input1并使$（this）.val（）工作。

$("#input1").change(function(e){
alert($(this).val())
});

对于stackoverflow的所有答案，看到可以将一个函数附加到输入字段并可以访问它的值 - 我问自己如何编写这个函数而不是用JQuery附加它。或者它只能附加JQuery？为什么呢？

Here是一个可以播放

的设施

Answer 1

<input id="input1" onchange="GetText.call(this)"/>

或

<input id="input1" onchange="GetText.apply(this)"/>

将调用GetText函数并将输入作为此值。然后你可以在GetText范围内使用$（this）或this.value。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Answer 2

您可以将对输入对象的引用作为内联调用中的参数传递给回调，如下所示：

<input id="input2" onchange="GetText(this)" />

然后在javascript中：

function GetText(_this){
  alert(_this.value);
}

Fiddle here

或者您可以直接将函数附加到输入对象

document.getElementById('input2').getText = function() {
    alert(this.value);
};

并在html中：

<input id="input2" onchange="this.getText()" />

Fiddle here

基本上，javascript中的这个对象绑定到上下文，其中已经创建了该函数。在全局定义函数时，例如在示例中使用GetText，这将绑定到该函数范围内的全局对象。

Answer 3

如果您正在寻找类似的Vanilla JS功能，您可以将其放入HTML中，我实际上不建议这样做，因为我支持JavaScript HTML分离，它将类似于：

在您的HTML中：

function getInputVal(context){
  alert(context.value);
}

Answer 4

内联JS不容易维护，特别是如果有这么多的话。最好将JS和HTML分开。

//Wait for DOM to load
$(function() {
    //set up change event listener --> anonymous function
    $('#input1').on('change', function() {
        alert( this.value );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input1" />

或如果您想使用命名函数：

//wait for DOM to load
$(function() {
    //Define function
    function GetText(){
      alert( this.value );
    }

    //set up change event listener --> named function
    $('#input1').on('change', GetText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="input1" />

Answer 5

我发现的所有答案都建议使用id来获取输入的值。

这实际上是一个非常糟糕的设计;你想创建一些事件处理程序，它们可能不知道它们所附加的元素。

不使用jQuery的示例如下所示：

var input = document.getElementById('input1');
input.addEventListener('change', function(event) {
  alert(this.value);
}, false);

<input id="input1" />

另请参阅：addEventListener()

将输入文本传递给调用函数（是的，可以）

5 个答案: