How do you input one input into the other?

Asked

Viewed 1,140 times

5

Hello I’m new here and I’m having a big doubt... I have this code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>

<script>
/*Aqui é o campo 1*/
window.oninput = function(){
document.querySelector('#a-1').value = document.querySelector('#a').value;
};
</script>
</body>
</html>

and I’d like to know.. when I type in the first field the second is automatically filled but when I delete inside the first field the second is deleted right? but if we could do the same things in the second field? is it possible? if yes.. how?

javascript html jquery

  • I’m sorry I’m learning kkk started hj...sorry.. I’ve been in the help area but was not being very well informed

  • keep code written instead of print

  • I’m sorry but I did that and one of the moderators blacked out

  • You cannot put "SOLVED" in the question. By marking in the answer that solved the problem, the question will be taken as solved.

  • Ahh right Thank you very much :D

  • You can mark in only 1 reply, which you found most useful. If you don’t know how].

Show 1 more comment

2 answers

6


Using event.target.id you can tell which the id of the typed field that triggered the event oninput and select which field should be changed, simply by reversing the order in the else:

window.oninput = function(event){
   
   var campo = event.target.id; // pega o id do campo que chamou o evento
   
   if(campo == "a"){
      document.querySelector('#a-1').value = document.querySelector('#a').value;
   }else if(campo == "a-1"){
      document.querySelector('#a').value = document.querySelector('#a-1').value;
   }
};
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>

Using jQuery

With jQuery you can do as follows:

$("#a, #a-1").on("input", function(){
   var alvo = this.id == "a" ? "a-1" : "a";
   $("#"+alvo).val( this.value );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>

3

You can do it this way

$("#a-1").bind('input',function(event) {

       var data=$(this).val();
       $("#a").val(data);
});

$("#a").bind('input',function(event) {
      
       var data=$(this).val();
       $("#a-1").val(data);
});
<!DOCTYPE html>
<html>
<head>
    <title></title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>


</body>
</html>

Or so, so if the user changes the text without using this is not detected

$("#a-1").keyup(function(event) {

       var data=$(this).val();
       $("#a").val(data);
});

$("#a").keyup(function(event) {
      
       var data=$(this).val();
       $("#a-1").val(data);
});
  
<!DOCTYPE html>
<html>
<head>
    <title></title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>


</body>
</html>

Or alternative to bind because it was discontinued in the new versions of jQuery

As of jQuery 3.0, . bind() has been deprecated.

Referred to in documentation 

$("#a-1").on('input',function(event) {

       var data=$(this).val();
       $("#a").val(data);
});

$("#a").on('input',function(event) {
      
       var data=$(this).val();
       $("#a-1").val(data);
});
<!DOCTYPE html>
<html>
<head>
    <title></title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Este campo é diretamente automático</h2>
<input type="text" id="a"> oninput: <input type="text" id="a-1"><br><br>


</body>
</html>

  • 1

    Thank you very much :D

  • 1

    The keyup is only bad because it doesn’t work if the guy paste the text with the mouse :D... but that’s not so important.

  • @Sam I hadn’t thought of that

  • @Sam Thanks I put another version so as to avoid this

  • Just watch out that the .bind is obsolete as of jQuery version 3.0, that is, it will soon be removed in a newer version.

  • @Sam put in another version

  • Complicated.. I tested but did not understand much but Sam’s codes I got good Thank you :D

Show 2 more comments

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.