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

IT技术 javascript dom-events
2021-03-14 04:37:12

我正在尝试做一些实验。我想要发生的是，每次用户在文本框中键入内容时，它都会显示在对话框中。我使用onchangeevent 属性来实现它，但它不起作用。我仍然需要按下提交按钮才能使其工作。我阅读了有关 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); 
}
6个回答

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

用户从剪贴板粘贴后无法检测更改
2021-04-18 04:37:12
'onkeypres'、'onkeyup' 等不是一个解决方案，当一个人只想在文本改变时调用一个函数！在这种情况下，关键事件会产生不必要的流量。（很奇怪，这个回复被选为解决方案，尤其是票数如此之多！！我不反对它，因为我不喜欢只反对回复。我更喜欢给出原因不好 - 这更有帮助！）
2021-04-27 04:37:12
由于这是公认的答案，我们可以将onkeypress解决方案更改为oninput
2021-05-04 04:37:12
我还注意到按下退格键后“keypress”没有被提升，至少在使用 jquery 时是这样。按下并释放退格键后，“keyup”确实会升高。“输入”解决了这个问题，也适用于复制粘贴，我认为这是这里的正确解决方案（正如用户“99 个问题 - 语法不是一个”在下面指出的那样）。
2021-05-05 04:37:12
那刚好解决了我的问题。我更喜欢onkeyup，因为它在input('element.value')
2021-05-15 04:37:12

使用.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/

这对我来说非常有效 - 谢谢。请注意其他人 - 不要忘记在您的 onLoad 或其他内容中实际执行上述代码以“开始”监控。
2021-04-18 04:37:12
@AndrésMorales 请注意，我的回答涵盖“粘贴、键控等”。我记得当我回答这个问题时 jQuery 解决方案很方便（7 年前！）。
2021-04-19 04:37:12
@AndrésMorales 这是一个公共库，许多应用程序都可以立即访问，并且很容易添加到那些没有的应用程序中。显然，这个答案不适用于那些不能（或选择不）使用 jQuery 的应用程序。
2021-04-24 04:37:12
@rybo111 没错！jQuery 是一个通用库并被广泛使用，但它在我的大脑中直接链接到关于“使用 JavaScript 对两个数字求和”的模因问题以及关于使用 jQuery 来做这件事的最受好评的回复。事实并非如此，但许多人无法将 JavaScript 和 jQuery 分开。
2021-05-10 04:37:12
评论太晚了，但是...如果回答用户显示纯 JavaScript，为什么建议使用 jQuery？
2021-05-14 04:37:12

检查击键只是一种部分解决方案，因为可以使用鼠标单击来更改输入字段的内容。如果您右键单击文本字段，您将拥有剪切和粘贴选项，您可以使用这些选项更改值而无需敲击键盘。同样，如果启用了自动完成，那么您可以左键单击某个字段并获得先前输入文本的下拉列表，然后您可以使用鼠标单击从您的选择中进行选择。击键捕获不会检测到这些类型的更改中的任何一种。

可悲的是，至少据我所知，没有立即报告更改的“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()）。我认为不可能在没有获得焦点的情况下更改输入字段的值，因此以这种方式打开和关闭计时器应该是安全的。

@Pakman 在某些情况下这是一个不错的解决方案。但是，如果您想按您输入的方式进行搜索 - 一个非常好的功能 IMO（当计算机可以更快地完成并且不会感到无聊时，为什么用户必须寻找东西？） - 或者其他任何真正的东西需要在文本更改时发生，为什么不能？
2021-04-18 04:37:12
@ChuckBatson 这个答案来自 2012 年。我注意到您在 2016 年发表了您的评论。如果您使用 jQuery，请参阅我的答案，现在非常简单。
2021-04-23 04:37:12
如果在没有获得焦点的情况下无法更改输入字段的值，并且当元素失去焦点时会发生模糊，为什么不只在 onblur 中查找更改呢？
2021-04-28 04:37:12
很伤心，谈到这一点。
2021-05-01 04:37:12
您想在输入字段更改时采取行动，还是在更改后失去焦点时采取行动？如果您想立即采取行动，则不能等待 onblur。
2021-05-10 04:37:12

HTML5定义了一个oninput事件来捕捉所有直接的变化。这个对我有用。

也适用于 type="number" 微调控件（onkeypress 不适用）。
2021-05-03 04:37:12

onchange 仅在用户提交对 input 元素的更改时发生，大多数时候这是元素失去焦点的时候。

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

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

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

其它你可能感兴趣的问题
上一篇是否可以通过网站控制手机上的相机灯？ 下一篇单击时 Bootstrap 下拉菜单关闭