How to synchronize two text box form values?

前端 未结 6 634
旧时难觅i
旧时难觅i 2021-02-05 04:56

Hi all i am new to jQuery. Suppose I have two HTML text boxes. How can I make it happen that if I write in text box A then same value goes to textbox B and if I write in B then

相关标签:
6条回答
  • 2021-02-05 05:19

    This is quite easy:

    $("#textBoxA").keyup(function(){
       $("#textBoxB").val($("#textBoxA").val());
    });
    
    $("#textBoxB").keyup(function(){
       $("#textBoxA").val($("#textBoxB").val());
    });
    
    0 讨论(0)
  • 2021-02-05 05:25

    A slightly more efficient way than the most upvoted answer is:

    var $inputs = $(".copyMe");  
    $inputs.keyup(function () {
         $inputs.val($(this).val());
    });
    

    http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/

    0 讨论(0)
  • 2021-02-05 05:29

    Using Snicksie's method, you can see the live demo below. I have included a button to reset the textbox values as well.

    http://jsfiddle.net/refhat/qX6qS/5/

    0 讨论(0)
  • 2021-02-05 05:30

    This is a more dynamic way using jQuery:

    $(document).ready(function() {
      $(".copyMe").keyup(function() {
        $(".copyMe").val($(this).val());
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input class="copyMe" type="text" placeholder="Enter a text"/>
    <input class="copyMe" type="text" />
    <input class="copyMe" type="text" />
    <input class="copyMe" type="text" />

    0 讨论(0)
  • 2021-02-05 05:30

    You'll have to put a function call on each textbox's onchange events, that will take the value of one box and put it in the other.

    0 讨论(0)
  • 2021-02-05 05:35

    I ran into this challenge today. I made a small plugin to make the code more readable and to handle text inputs, but also select fe.

    When you include the plugin, you can simply use $("selector").keepInSync($("otherselector"));

    $.fn.keepInSync = function($targets) {
      // join together all the elements you want to keep in sync
      var $els = $targets.add(this);
      $els.on("keyup change", function() {
        var $this = $(this);
        // exclude the current element since it already has the value
        $els.not($this).val($this.val());
      });
      return this;
    };
    
    //use it like this
    $("#month1").keepInSync($("#month2, #month3"));
    $("#text1").keepInSync($("#text2"));
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h1>Two way sync</h1>
    <select id="month1">
      <option value="">Please select a moth</option>
      <option value="jan">January</option>
      <option value="feb">February</option>
      <option value="mar">March</option>
    </select>
    <select id="month2">
      <option value="">Please select a moth</option>
      <option value="jan">1</option>
      <option value="feb">2</option>
      <option value="mar">3</option>
    </select>
    <select id="month3">
      <option value="">Please select a moth</option>
      <option value="jan">Jan</option>
      <option value="feb">Feb</option>
      <option value="mar">Mar</option>
    </select>
    <br>
    <input type="text" id="text1">
    <input type="text" id="text2">

    0 讨论(0)
提交回复
热议问题