使用JAVASCRIPT更改输入中的值时触发事件

我想触发一个功能，改变我的按钮在网页中的状态。我的输入最初是这样的：-



现在，当我在文本框中键入内容时，我希望它更改如下：-



注意呼叫按钮被激活。我使用onblur方法来监听更改，但这不是动态发生的。我在框中输入一些内容，然后单击“外部”。这就是执行

onblur

时的点。
当用户更改框中的值时，如何调用onblur方法？
下面是我正在使用的javascript代码

function toggleCallButton() {
    if (document.getElementById('dialArea').value == '') {
        document.getElementById('callButton').classList
                .add('input-group-addon-disabled');
        document.getElementById('callButton').classList
                .remove('input-group-addon-active');
    } else {
        document.getElementById('callButton').classList
                .remove('input-group-addon-disabled');
        document.getElementById('callButton').classList
                .add('input-group-addon-active');
    }
}

你试过这个吗

<input type="text" onchange="toggleCallButton();"/>

JAVASCRIPT

function toggleCallButton() {
    if (document.getElementById('dialArea').value == '') {
        document.getElementById('callButton').classList.add('input-group-    addon-disabled');
        document.getElementById('callButton').classList.remove('input-group-addon-active');
    } else {
        document.getElementById('callButton').classList.remove('input-group-addon-disabled');
        document.getElementById('callButton').classList.add('input-group-addon-active');
    }
}
window.onload = toggleCallButton;

---

就像

onblur

事件一样，也有

onkeyup

和

onkeypress

事件，您可以在您的案例中使用这些事件。使用onkeyup可以实现这一点，但这会导致每次用户按键时调用我的函数，这会导致许多不必要的函数调用。我想知道是否有一个优雅的解决方案…“onchange”只有在textbox的值与以前的值相比发生更改时才起作用。因此，这是第一次它不起作用，因为状态没有改变…对我来说不起作用…你应该首先用禁用的样式类加载输入。造成问题的不是onchange的值更改语义，问题是，当您从输入中失去焦点时，onchange会触发。如果你问我，你应该检查window.onload的输入文本，如果为空，添加禁用的类，并用onkeyup/onkeydown事件控制流。onkeyup=“toggleCallButton（）；”是否应该工作nkeyup=“toggleCallButton（）；”将工作，我同意，但每次我按下一个键时都会调用该函数……如果该函数很大怎么办？每次都会执行…嗯。现在，这改变了一切：）为什么你的功能很大？实际上，你只是对是否有价值感兴趣。

.input-group-addon-disabled{
    opacity: 0.5;
}

.input-group-addon-active{
    opacity: 1;
}

function toggleCallButton() {
    if (document.getElementById('dialArea').value == '') {
        document.getElementById('callButton').classList.add('input-group-    addon-disabled');
        document.getElementById('callButton').classList.remove('input-group-addon-active');
    } else {
        document.getElementById('callButton').classList.remove('input-group-addon-disabled');
        document.getElementById('callButton').classList.add('input-group-addon-active');
    }
}
window.onload = toggleCallButton;