5

Olá sou novato aqui e eu estou com uma grande dúvida... Estou com este código:

<!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>

e eu gostaria de saber.. quando eu digito no primeiro campo o segundo é automaticamente preenchido mas quando vou apagar dentro do primeiro campo o segundo é apagado certo? mas se desse para fazer as mesmas coisas no segundo campo? é possível? se sim.. como?

6
  • Me desculpe estou aprendendo kkk comecei hj...perdão.. eu já fui na area de ajuda mas não estava sendo muito bem informado 1/02/2019 às 22:13
  • mantenha o código escrito em vez do print 1/02/2019 às 22:14
  • Me desculpa mas eu fiz isso e um dos moderadores apagaram ai eu mandei print 1/02/2019 às 22:16
  • Não pode colocar "RESOLVIDO" na pergunta. Marcando ✔ na resposta que resolveu o problema, a pergunta será tida como resolvida.
    – Meu ovo
    1/02/2019 às 22:28
  • Ahh certo Muito Obrigado :D 1/02/2019 às 22:34

2 Respostas 2

6

Usando event.target.id você consegue saber qual o id do campo digitado que disparou o evento oninput e selecionar qual campo deve ser alterado, bastando para tal inverter a ordem no 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>

Usando jQuery

Com jQuery você pode fazer da seguinte forma:

$("#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>

1
3

Voce pode fazer do seguinte modo

$("#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>

Ou assim, sendo que assim se o utilizador mudar o texto sem usar este não é detectado

$("#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>

Ou alternativa ao bind pois foi descontinuado nas novas versões do jQuery

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

Referido na documentação

$("#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>

7
  • 1
    Muito obrigado :D 1/02/2019 às 23:05
  • 1
    O keyup só é ruim porque não funciona se o cara colar o texto com o mouse :D... mas isso não é tão importante.
    – Meu ovo
    1/02/2019 às 23:10
  • @Sam Não tinha pensado nisso 1/02/2019 às 23:11
  • @Sam Obrigado eu coloquei outra versão de modo a evitar isso 1/02/2019 às 23:16
  • Só cuidado que o .bind ficou obsoleto a partir da versão 3.0 do jQuery, ou seja, daqui a pouco será removido numa versão mais nova.
    – Meu ovo
    1/02/2019 às 23:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .