在使用JavaScript改变输入值时触发事件

-1

我想要触发一个函数来改变网页中按钮的状态。我最初的输入如下所示： -

enter image description here

现在，当我在文本框中输入的东西，我希望它改变这样的： -

通知呼叫按钮得到激活。我正在使用onblur方法来侦听更改，但这不会动态发生。我在框中输入内容，然后点击外部。这是执行onblur时的要点。
只要用户更改框中的值，如何调用onblur方法？
这里是javascript代码，我使用
在使用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'); 
    } 
}

来源

2015-04-01 nikoo28

就像'onblur'事件，也有'onkeyup'和'onkeypress'事件你可以在你的案例中使用 – asprin 2015-04-01 10:50:28

onkeyup可以做到这一点，但是这会导致我的函数在用户每次按下一个按键时被调用，这会导致很多不必要的函数调用。想知道是否有一个优雅的解决方案... – nikoo28 2015-04-01 11:35:28

你试过吗？

<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;

来源

2015-04-01 10:50:56

'onchange'只有在文本框的值与之前的值相比时才会有效。所以第一次它不会工作，因为状态没有改变...不适用于我... – nikoo28 2015-04-01 11:27:53

你应该首先加载带有禁用样式类的输入。不是onchange的价值变化语义会产生问题，问题在于，当您从输入中放松焦点时，onchange会触发。如果你问我，你应该检查window.onload中的输入文本，如果为空，则添加禁用类，并使用onkeyup/onkeydown事件控制流。的onkeyup = “toggleCallButton（）;”应该工作 – 2015-04-01 11:36:31

onkeyup =“toggleCallButton（）;”将工作，我同意但是每次按下按键时都会调用该函数......如果函数很大，该怎么办？它会被执行每一次... – nikoo28 2015-04-01 11:42:24

在使用JavaScript改变输入值时触发事件

回答

相关问题