如何在JavaScript中的文本框的按键事件上启用或禁用按钮

Question

I created a TextBox :-

TextBox ID="TxtUname" onKeyPress="ENABLE_BTN()"

Now i wrote a function :-

script type="text/javascript"

window.onload = function() { 
        document.getElementById('SSAccept').disabled = true; 
}; 
function ENABLE_BTN() {
     var EN=document.getElementById('TxtUname').value;
     if(EN=='') {
         document.getElementById('SSAccept').disabled=true;
     } else {
         document.getElementById('SSAccept').disabled=false;
     }
}
</script>

BUT STILL THE DISABLED BUTTON IS NOT GETTING ENABLED ON PRESSING ANY KEY IN THE TEXTBOX. Can anyone tell me what i did wrong ?? Thanks in Advance

Dev..

Answer 1

onkeypress doesn't work in all browsers -> http://www.quirksmode.org/js/keys.html

onkeyup / onkeydown should be used ->

Working example : http://jsfiddle.net/KCBzk/

HTML :

<input id="TxtUname" value="" onkeydown="ENABLE_BTN()"/><br>
<button id="SSAccept">Some test</button>

Javascript:

window.onload = function() {
    document.getElementById('SSAccept').disabled = true; 
}
function ENABLE_BTN() {
     var EN=document.getElementById('TxtUname').value;
     if(EN=='') {
         document.getElementById('SSAccept').disabled=true;
     } else {
         document.getElementById('SSAccept').disabled=false;
     }
}

Answer 2

the thing is that you need an event to invoke that function. you should monitor your textbox for change and invoke the function whenever the value changes. like using jquery

$("#TxtUname").keydown(function(e) { 
    if($("#TxtUname").val == '') {
        //..disable button..
    } else {
        //..enable button
    }
});