Question

我想触发一个改变网页中按钮状态的功能。我的输入最初看起来像这样： -

enter image description here

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

注意呼叫按钮被激活。我使用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');
    }
}

Answer 1

你试过这个吗？

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

编辑：

<body>
    <div>
        <input id="dialArea" type="text" onkeyup="toggleCallButton();" />
        <div id="callButton">Call Button</div>
    </div>
</body>

CSS

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

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

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;

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

1 个答案: