javascript - Copy another textbox value in real time Jquery - Stack Overflow

admin管理员组

文章数量:1222300

I want to get the value of another textbox and input it in realtime into the other textbox. HOW CAN I DETECT IF TEXT_3 WAS CHANGED? IF TEXT_3 VALUE CHANGED, IT MUST BE INPUTTED TO TEXT_4 For your convenience, here is the code and the demo:

**HTML**
    <label>TEXT 1: </label><input type="text" id="text_1" value=""/>
    <label>TEXT 2: </label><input type="text" id="text_2" value=""/>
    <label>TEXT 3: </label><input type="text" id="text_3" value=""/>
    <label>TEXT 4: </label><input type="text" id="text_4" value=""/>

**JAVASCRIPT**
    /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 KEYUP*/
    $("#text_1").keyup(function() {
        $("#text_3").val($("#text_1").val() + " " + $("#text_2").val());
    })

    /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 AND TEXT_2 KEYUP*/    
    $("#text_2").keyup(function(){
        $("#text_3").val($("#text_1").val() + " " + $("#text_2").val());
    })

    /* HOW CAN I  DETECT IF TEXT_3 WAS CHANGED? IF TEXT_3 VALUE CHANGED, IT MUST BE INPUTTED TO TEXT_4*/

    /* not working solution */   
    $("#text_3").change(function(){
        $("#text_4").val($("#text_3").val());
    })

DEMO: /

Thanks for responses!

I want to get the value of another textbox and input it in realtime into the other textbox. HOW CAN I DETECT IF TEXT_3 WAS CHANGED? IF TEXT_3 VALUE CHANGED, IT MUST BE INPUTTED TO TEXT_4 For your convenience, here is the code and the demo:

**HTML**
    <label>TEXT 1: </label><input type="text" id="text_1" value=""/>
    <label>TEXT 2: </label><input type="text" id="text_2" value=""/>
    <label>TEXT 3: </label><input type="text" id="text_3" value=""/>
    <label>TEXT 4: </label><input type="text" id="text_4" value=""/>

**JAVASCRIPT**
    /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 KEYUP*/
    $("#text_1").keyup(function() {
        $("#text_3").val($("#text_1").val() + " " + $("#text_2").val());
    })

    /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 AND TEXT_2 KEYUP*/    
    $("#text_2").keyup(function(){
        $("#text_3").val($("#text_1").val() + " " + $("#text_2").val());
    })

    /* HOW CAN I  DETECT IF TEXT_3 WAS CHANGED? IF TEXT_3 VALUE CHANGED, IT MUST BE INPUTTED TO TEXT_4*/

    /* not working solution */   
    $("#text_3").change(function(){
        $("#text_4").val($("#text_3").val());
    })

DEMO: http://jsfiddle.net/8eXRx/7/

Thanks for responses!

• javascript
• jquery
• html

Share Improve this question Follow asked May 22, 2012 at 8:31 fart-y-goerfart-y-goer 73933 gold badges88 silver badges2727 bronze badges 0

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 6

Add change() after your textbox3.val(), like below:

$("#text_1").keyup(function() {
    $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()).change();
})

/* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 AND TEXT_2 KEYUP*/    
$("#text_2").keyup(function(){
    $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()).change();
})

http://jsfiddle.net/8eXRx/12/

The problem is that you can't bind special event to check that the textbox value was changed using JavaScript and not manually. To solve the task, one option is to use the same keyup event for both text_1 and text_2. JQuery will add the new handler to the existing handlers:

$("#text_1, #text_2").keyup(function(){
    $("#text_4").val($("#text_3").val());
})

DEMO: http://jsfiddle.net/8eXRx/11/

the change event fires after the input field has lost it's focus. If you want to update it in realtime you also need the keyup event, so something like this:

$("#text_3").keyup(function(){
    $("#text_4").val($("#text_3").val());
})

Try:

$("#text_3").keyup(function(){
   cur_val = $(this).val(); //grab #text_3's current value
   $(this).val(cur_val); // this is optional, but keep for sake
   $("#text_4").val(cur_val); //set #text_4's value as what #text_3 is having
});

Try this.. n1 and n2 are ids of textbox

 $(document).ready(function(){

    $(':input').keyup(function(){

      $("#n2").val($("#n1").val()).change(); 

    });
});

本文标签： javascriptCopy another textbox value in real time JqueryStack Overflow