0

Let's say I have two input fields, Input field A and Input field B. I want to type in Input field A but at the same time the value in input field A also go into input field B.

I know this method can be done by inputfiledB.value() == inputfieldA.value() but I dont want that. I want real time effect like when I type "z" in inputfield A, at the same time inputfield B also has "z". Can anyone help me with this? I really appreciate it. Thank you.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
Phea
  • 9
  • 2

2 Answers2

2

If you only want to do it in response to typing (as compared to all forms of editing including via the Edit menu or drag'n'drop) then add a keyup event handler to the first input that updates the second on each keystroke.

Alternatively, using an input event handler should cover you for Edit menu and drag'n'drop changes as well as typing:

document.getElementById("a").addEventListener("input", function() {
  document.getElementById("b").value = this.value;
});
label { display: block; margin-bottom: 4px; }
<label>Field A: <input id="a"></label>
<label>Field B: <input id="b"></label>
nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • thank you for your answer. let me add to my question, let say whenever input field A receive "apple", input field B will also receive "apple" too but then I want input field B to fire an enter. Is there any possible way to do this? – Phea Sep 19 '16 at 04:17
  • What do you mean by "fire an enter"? And how would it know when to do so, do you want to look specifically for the word "apple", or do you have a list of other words you're looking for, or...? – nnnnnn Sep 19 '16 at 05:29
0

Something like this should work.

<input type="text" id="inputfieldA" onkeyup="syncfield()"></input>
<input type="text" id="inputfieldB"></input>

<script>
function syncfield() {
  var x = document.getElementById("inputfieldA").value;
  document.getElementById("inputfieldB").value = x;
}
</script>
jconra
  • 84
  • 4