DOM manipulation when typing not working on iPad but is working on iPhone

Question

There's been several questions asked on this topic but none have answered this question.

Basically, for this application I'm working on. When a user signs up, the user must enter a password in one <input> field and re-type it in another input field.

I'm using JavaScript DOM manipulation to do two things:

Alert the user if the confirmed password is dissimilar to the initial password.
Change the disabled attribute of the button from false to true when the passwords are the same.

To do this, I am adding an event listener to the input field where the user confirms the password. In this event listener, there's a conditional statement which assesses if the two password fields are the same. This event listener works with oninput and onkeyup on my Chrome browser and my iPhone 6 Safari browser. It does not work on my iPad Safari browser (which I assume is an older version).

const password2 = document.getElementById("password2");
    const password = document.getElementById("password");
    password2.addEventListener("keyup", () => {
        if (password2.value === password.value) {
            document.getElementById("registerButton").className = "btn btn-success w-100 submit-button"
            document.getElementById("registerButton").disabled = false;
            document.getElementsByClassName("showAlert")[0].setAttribute("class", "hideAlert");
        } else {
            document.getElementById("registerButton").className = "btn btn-secondary w-100 submit-button disabled"
            document.getElementById("registerButton").disabled = true;
            document.getElementsByClassName("hideAlert")[0].setAttribute("class", "showAlert");
        }
    });

Firstly, what event listeners should I use for this problem (if there are any)? If there aren't any, what other avenues should I look into?

Lastly, is there a better way to write this? Looks kind of clunky and not amateurish.

Thanks!

score 0 · Answer 1 · answered Jul 17 '20 at 22:29

See iOS 9 - keyup event not firing

for touch screen devices, usually keypress works more often, but there was a suggestion to add the same function to both keyup and keypress, but if it works for you, keydown should be fine, so

const password2 = document.getElementById("password2");
const password = document.getElementById("password");
password2.addEventListener("keyup", eventify);

password2.addEventListener("keypress", eventify);

//OR simply

password2.addEventListener("keydown", eventify);

DOM manipulation when typing not working on iPad but is working on iPhone

1 Answers1