Question

我正在尝试做一些实验。我想要发生的是，每次用户在文本框中键入内容时，它都会显示在对话框中。我使用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); 
}

Answer 1

onchange仅在控件模糊时触发。请改为onkeypress。

Answer 2

使用.on('input'...监控来自jQuery 1.7及更高版本的输入（粘贴，密钥等）的每个更改。

对于静态和动态输入：

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

仅适用于静态输入：

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

JSFiddle with static / dynamic example：https://jsfiddle.net/op0zqrgy/7/

Answer 3

检查击键只是部分解决方案，因为可以使用鼠标点击更改输入字段的内容。如果右键单击文本字段，则可以剪切和粘贴选项，以便在不进行击键的情况下更改值。同样，如果启用了自动填充，则可以左键单击一个字段并获取以前输入的文本的下拉列表，您可以使用鼠标单击从您的选项中进行选择。按键捕获不会检测到这些类型的更改。

可悲的是，至少据我所知，没有“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毫秒检查一次“城市”的值，您可以根据需要进行调整。如果您愿意，可以使用匿名函数而不是定义lookForCityChange（）。请注意，您的代码甚至浏览器可能会为输入字段提供初始值，以便在用户执行任何操作之前通知您“更改”;根据需要调整代码。

如果定时事件每隔十分之一响一次的想法似乎很笨拙，你可以在输入字段收到焦点时启动定时器并在模糊时终止它（使用clearInterval（））。我不认为在没有接收焦点的情况下改变输入字段的值是可能的，因此以这种方式打开和关闭定时器应该是安全的。

Answer 4

HTML5 定义oninput事件以捕获所有直接更改。它对我有用。

Answer 5

使用以下事件代替“onchange”

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

Answer 6

onchange仅在用户提交对input元素的更改时发生，大部分时间是元素失去焦点时。

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

Read more about the change event here

Read more about the input event here

Answer 7

首先，什么'不起作用'？你没看到警报吗？

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

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

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

Answer 8

我遇到了Safari没有在文本输入字段上触发“onchange”事件的问题。我使用了jQuery 1.7.2“更改”事件，它也没有用。我最终使用了ZURB的textchange事件。它适用于鼠标事件，无需离开现场即可开火：
http://www.zurb.com/playground/jquery-text-change-custom-event

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

Answer 9

最好将onchange(event)与<select>一起使用。通过<input>，您可以使用以下事件：

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

Answer 10

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

Answer 11

一些有关IMO重要的评论：

输入元素在用户操作ENTER或模糊等待是正确的行为之前不会发出'change'事件。
您要使用的事件是"input"（“ 输入时”）。这充分证明了两者之间的区别：https://javascript.info/events-change-input
这两个事件表示两个不同的用户手势/时刻（“输入”事件表示用户正在写或导航选择列表选项，但仍未确认更改。“更改”表示用户确实更改了值（输入或模糊我们的图片）
在这种情况下，监听像此处建议的许多重要事件是一种不好的做法。（例如人们修改输入中ENTER的默认行为）...
jQuery与这无关。这都是HTML标准。
如果您无法理解为什么这是正确的行为，也许会有所帮助，作为实验，请使用文本编辑器或浏览器，而无需鼠标/键盘，而只需键盘。

我的两分钱。

Answer 12

当您在输入字段中输入时使用 onchange 时 – 没有事件。但是当你把焦点移到别的地方时，比如点击一个按钮——就会有一个改变事件

您可以使用oninput

oninput 事件在用户每次修改值后触发。与键盘事件不同，它在任何值更改时触发，即使是那些不涉及键盘操作的值：粘贴使用鼠标或使用语音识别来听写文本。

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    console.log(input.value);
  };
</script>

如果我们想处理对 <input> 的每一次修改，那么这个事件是最好的选择。

Answer 13

尝试onpropertychange。它只适用于IE。

html <input type =“text”/> onchange事件无效

13 个答案: