Toggle keypress event everytime condition changes

January 4, 2022

The following is my html code:

<input type="text" class="form-control" id="emp" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" >

I have a radiobutton which when checked should remove the onkeypress event and when unchecked should activate it. This is my js:

input.addEventListener('change', function() {
    if (input.checked) {
      document.getElementById("tag").innerHTML="No";
      document.getElementById("emp").value="";
      document.getElementById("emp").removeAttribute("onkeypress");
    } else {
      document.getElementById("tag").innerHTML="Name";
      document.getElementById("emp").value="";
      document.getElementById("emp").setAttribute("onkeypress", "");
    }
});

But when I toggle the radiobutton, the code doesn’t work properly. Can you please help me?

>Solution :

You are setting onkeypress attribute to an empty string in the unchecked case, so it will do nothing, same as if the attribute is removed. You’d need to set it back to the original text, which you could get with getAttribute and store.

var onkeypress_code = document.getElementById("emp").getAttribute("onkeypress");
input.addEventListener('change', function() {
    if (input.checked) {
      document.getElementById("tag").innerHTML="No";
      document.getElementById("emp").value="";
      document.getElementById("emp").removeAttribute("onkeypress");
    } else {
      document.getElementById("tag").innerHTML="Name";
      document.getElementById("emp").value="";
      document.getElementById("emp").setAttribute("onkeypress", onkeypress_code);
    }
});

But I would recommend doing this differently. You can use addEventListener and removeEventListener (removing the onkeypress from the HTML):

function emp_onkeypress(event) {
    return (
        (event.charCode > 64 && event.charCode < 91) ||
        (event.charCode > 96 && event.charCode < 123)
    );
}
function checkbox_onchange(event) {
    if (input.checked) {
      document.getElementById("tag").innerHTML="No";
      document.getElementById("emp").value="";
      document.getElementById("emp").removeEventListener("keypress", emp_onkeypress);
    } else {
      document.getElementById("tag").innerHTML="Name";
      document.getElementById("emp").value="";
      document.getElementById("emp").addEventListener("keypress", emp_onkeypress);
    }
}
input.addEventListener('change', checkbox_onchange);
checkbox_onchange(); // update based on initial checkbox state

Or you can simply handle the checked/unchecked state in your keypress handler. If you define the keypress handler in your JS, you will have access to the input variable.

function emp_onkeypress(event) {
    if (input.checked) {
        return;
    }
    return (
        (event.charCode > 64 && event.charCode < 91) ||
        (event.charCode > 96 && event.charCode < 123)
    );
}
document.getElementById("emp").addEventListener("keypress", emp_onkeypress);

input.addEventListener('change', function() {
    if (input.checked) {
      document.getElementById("tag").innerHTML="No";
      document.getElementById("emp").value="";
    } else {
      document.getElementById("tag").innerHTML="Name";
      document.getElementById("emp").value="";
    }
});

Also, charCode is deprecated; key and code are the recommended APIs.