Question

我有3个文本框，我想创建这样的东西：当我输入到textbox1时，它将复制到textbox3，当我输入到textbox2时，它将附加到带有分隔符（ - ）的textbox3。

例如，如果我将STACK写入textbox1，textbox3将导致STACK，那么如果我用OVERFLOW写下textbox2，则textbox3值为：STACK-OVERFLOW

这是我的小提琴代码：

$(function() {                                      
    $("#text1").keyup(function() {                 
        $('#text3').val(this.value);                 
    });
    $("#text2").keyup(function() {                 
        $('#text3').val.append('-'+this.value);                 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />

任何人都可以修复我的代码吗？

Answer 1

$(function() {                                      
    var text1value , text2value;
    $("#text1").keyup(function() {                 
        text1value = $(this).val();
        $('#text3').val(text1value);                 
    });
    $("#text2").keyup(function() {                 
        text2value = $(this).val();
        $('#text3').val(text1value+'-'+text2value);                 
    });
});

Answer 2

您还需要检查text2是否为空，这样您就不必连接＆＃39; - ＆＃39;在那种情况下。

JS Fiddle

$(function() {                                      
    $("#text1").keyup(function() {
        var text2 = $('#text2').val();
        var temp = $(this).val();
        if (text2 != '') {
            temp = $(this).val()+'-'+text2;
        }
        $('#text3').val(temp);                 
    });
    $("#text2").keyup(function() {   
        var temp = $('#text1').val()+'-'+$(this).val();
        $('#text3').val(temp);                 
    });
});

Answer 3

$(function() {                                      
    $("#text1").keyup(function() {                 
        $('#text3').val(this.value);                 
    });
    $("#text2").keyup(function(e) {                 
        $('#text3').val(function(index, val) {
            return $("#text1").val() + "-" + e.target.value;
        });
    });
});

This should do it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />

Answer 4

这是一种方法： http://jsfiddle.net/6qojd9L4/

$(function() {                                      
    $("#text1").keyup(function() {                 
        $('#text3').val(this.value + '-' + $('#text2').val());                 
    });
    $("#text2").keyup(function() {                 
        $('#text3').val($('#text1').val() + '-'+this.value);                 
    });
});

键入时JQuery附加到文本框

4 个答案: