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

Question

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

Answer 1

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

Answer 2

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

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毫秒检查一次"city"的值,您可以根据需要进行调整.如果您愿意,可以使用匿名函数,而不是定义lookForCityChange().请注意,您的代码甚至浏览器可能会为输入字段提供初始值,以便在用户执行任何操作之前通知您"更改"; 根据需要调整代码.

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

Answer 4

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

Answer 5

onchange 仅当用户提交对input元素的更改时才会发生,大多数情况下,这是元素失去焦点时.

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

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

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

Answer 6

使用以下事件而不是"onchange"

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

Answer 7

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

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

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

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