html <input type =“ text” /> onchange事件不起作用

我正在尝试做一些实验。我想发生的是，每当用户在文本框中键入内容时，它将显示在对话框中。我使用onchange事件属性来实现它，但是它不起作用。我仍然需要按“提交”按钮才能使其正常工作。我阅读了有关AJAX的文章，并正在考虑了解这一点。我是否仍需要AJAX使其起作用，或者简单的JavaScript够用吗？请帮忙。

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchange仅在控件模糊时触发。试试吧onkeypress。

使用.on('input'...以监视来自jQuery的1.7及以上的每一个变化到输入（粘贴，KEYUP等）。

对于静态和动态输入：

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

仅对于静态输入：

$('.my-class').on('input', function(){
    alert('Input changed');
});

具有静态/动态示例的JSFiddle：https ://jsfiddle.net/op0zqrgy/7/

检查击键仅仅是部分解决方案，因为可以使用鼠标单击来更改输入字段的内容。如果右键单击文本字段，则将具有剪切和粘贴选项，可用于更改值而无需按键。同样，如果启用了自动完成功能，则可以在字段中单击鼠标左键，然后获得以前输入的文本的下拉菜单，然后单击鼠标即可从选项中进行选择。击键陷阱将不会检测到这两种类型的更改。

不幸的是，至少就我所知，没有“ onchange”事件会立即报告更改。但是，有一种适用于所有情况的解决方案：使用setInterval（）设置计时事件。

假设您的输入字段的ID和名称为“ city”：

<input type="text" name="city" id="city" />

有一个名为“ city”的全局变量：

var city = "";

将此添加到您的页面初始化中：

setInterval(lookForCityChange, 100);

然后定义一个lookForCityChange（）函数：

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

在此示例中，每100毫秒检查一次“ city”的值，您可以根据需要进行调整。如果愿意，可以使用匿名函数代替定义lookForCityChange（）。请注意，您的代码甚至浏览器可能会为输入字段提供初始值，因此在用户执行任何操作之前，系统可能会通知您“更改”。根据需要调整代码。

如果计时事件每十分之一秒消失的想法似乎令人费解，则可以在输入字段接收到焦点时启动计时器，并在模糊时终止它（使用clearInterval（））。我认为没有输入焦点就无法更改输入字段的值，因此以这种方式打开和关闭计时器应该是安全的。

HTML5定义了一个oninput事件来捕获所有直接更改。这个对我有用。

onchange 仅在用户对输入元素所做的更改（大多数情况下是元素失去焦点）时发生。

如果您希望每次元素值更改时都触发函数，则应使用该oninput事件-这比键上/下事件好，因为可以使用用户的鼠标（例如，粘贴或自动填充）更改该值

在此处阅读有关更改事件的更多信息

在此处阅读有关输入事件的更多信息

使用以下事件代替“ onchange”

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

首先，什么是“无效”？您没有看到警报吗？

另外，您的代码可以简化为

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

我遇到了Safari无法在文本输入字段上触发“ onchange”事件的问题。我使用了jQuery 1.7.2“更改”事件，但它也不起作用。我最终使用了ZURB的textchange事件。它与mouseevents一起使用，并且可以在不离开字段的情况下触发：http :
//www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

IMO的一些重要评论：

• 在USER操作ENTER或模糊等待之前，输入元素不会发出'change'事件是正确的行为。

• 您要使用的事件是"input"（“ oninput ”）。这很好地证明了两者之间的区别：https : //javascript.info/events-change-input

• 这两个事件表示两个不同的用户手势/时刻（“输入”事件表示用户正在写或导航选择列表选项，但仍未确认更改。“更改”表示用户确实更改了值（带有回车或模糊操作）我们的）

• 在这种情况下，倾听像这里建议的许多重要事件是一种不好的做法。（例如人们修改输入中ENTER的默认行为）...

• jQuery与此无关。这都是HTML标准。

• 如果您无法理解为什么这是正确的行为，也许会有所帮助，作为实验，请使用文本编辑器或浏览器，而无需鼠标/键盘，而只需键盘。

我的两分钱。

onkeyup为我工作。按下退格键时不会触发onkeypress。

这是更好地使用onchange(event)与<select>。与<input>您可以使用以下事件：

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

尝试一下onpropertychange。它仅适用于IE。