How can I mirror a text input to a login and password input. (Yes they are the same)

Question

Let's say I have login form with login and password. Both are the same and I want to input the value in a third text input box and update the values of the login and password as I type.

How can I do this using little JavaScript and HTML only?

It would be helpful to have a specific example. Also, this is very broad and theoretical as Stack Overflow is for a specific problem. https://stackoverflow.com/help/on-topic — mathmaniac88, Dec 19 '19 at 23:44

score 0 · Answer 1 · answered Dec 20 '19 at 00:05

You can add an event listener to the text box in which the user is typing into for a keypress event. On keypress, you can then apply the current text box value into the target textbox.

document.getElementById('txtType').addEventListener('keyup', e => {
  const copyTextInput = document.getElementById('txtCopied');
  copyTextInput.value = e.target.value;
});

<label for="txtType">Type Here</label>
<input id="txtType" />
<br />
<label for="txtCopied">Copied Text as you're typing</label>
<input id="txtCopied" />

How can I mirror a text input to a login and password input. (Yes they are the same)

1 Answers1