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

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 及更高版本监视对输入（粘贴、键入等）的每次更改。

对于 static 和动态输入：

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

仅对于 static 输入：

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

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

Answer 3

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

可悲的是，至少据我所知，没有立即报告更改的“onchange”事件。 但是有一个适用于所有情况的解决方案：使用 setInterval() 设置计时事件。

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

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

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

var city = "";

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

setInterval(lookForCityChange, 100);

然后定义一个lookForCityChange() function：

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

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

如果每十分之一秒发生一次计时事件的想法看起来很笨拙，您可以在输入字段接收到焦点时启动计时器并在模糊时终止它（使用 clearInterval()）。 我认为在没有获得焦点的情况下更改输入字段的值是不可能的，因此以这种方式打开和关闭计时器应该是安全的。

Answer 4

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

Answer 5

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

如果您希望您的 function 在每次元素值更改时触发，您应该使用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); 
}

Answer 8

我遇到了 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'));
});

Answer 9

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

Answer 10

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

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

Answer 11

当您在输入字段中输入时我们使用onchange - 没有事件。 但是当你将焦点移动到其他地方时，例如，点击一个按钮——会有一个 change 事件

你可以使用oninput

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

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

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

Answer 12

在我弄清楚如何做之前，我一直面临着同样的问题。 您可以利用 React 钩子 useEffect 编写一个 JS function，它将在 React 渲染后触发。

useEffect(()=>{
    document.title='fix onChange with onkeyup';
    const box = document.getElementById('changeBox');
    box.onkeyup = function () {
        console.log(box.value);
    }
},[]);

注意当输入值改变时不会触发 onchange。 仅当输入的值发生更改然后输入模糊时才会更改。 您需要做的是在给定输入中触发时捕获 keypress 事件，这就是我们使用 onkeyup 方法的原因。 在你有<form/>的<Input/>的功能组件中写这个

<form onSubmit={handleLogin} method='POST'>
                    <input 
                    aria-label= 'Enter Email Address'
                    type='text'
                    placeholder='Email Address'
                    className='text-sm text-gray-base w-full mr-3 py-5 px-4 h-2 border border-gray-primary rounded mb-2'
                    
                    id='changeBox'
                    
                    />
                    
                </form>

结果图像：控制台图像

Answer 13

IMO 很重要的几点评论：

• 在用户操作 ENTER 或模糊等待是正确的行为之前，输入元素不会发出“更改”事件。

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

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

• 在这种情况下，像这里推荐的许多那样监听关键事件是一种不好的做法。 （就像人们在输入上修改 ENTER 的默认行为一样）......

• jQuery 与此无关。 这一切都在 HTML 标准中。

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

我的两分钱。

Answer 14

尝试onpropertychange 。 它仅适用于 IE。