在使用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改變輸入值時觸發事件

回答

相關問題