jQuery的 - 附加每個輸入值到一個

Question

我有一些文本框，例如4個輸入，我想每個值追加到一個特定的文本框上的默認值，但問題旁邊KEYUP功能逗號將覆蓋以前的值值。

想是這樣的：

01115468852，234324234，423423113345，43341889955

var curval = $('#PhoneTextbox').val(); 
 

 
$('.tag').each(function() { 
 
    $(this).keyup(function() { 
 
    var tags = $(this).val(); 
 
    $('#PhoneTextbox').attr('value', curval + " , " + tags); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input id="PhoneTextbox" value="01115468852" type="text" /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" />

Answer 1

試試這個：

$('.tag').each(function() { 
    $(this).keyup(function() { 
     var tags = $(this).val(); 
     var curval = $('#PhoneTextbox').val(); 
     $('#PhoneTextbox').attr('value', curval + " , " + tags); 
    }); 
}); 

這樣你在最後附加值結束

Answer 2

使用.change()添加它，而不是.keyup()

$('.tag').each(function() { 
 
$(this).change(function() { 
 
    var tags = $(this).val(); 
 
    var curval = $('#PhoneTextbox').val(); 
 
    $('#PhoneTextbox').attr('value', curval + " , " + tags); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input id="PhoneTextbox" value="01115468852" type="text"/> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<input class="tag" value="" type="text"/> 
 
<input class="tag" value="" type="text"/> 
 
<input class="tag" value="" type="text"/> 
 
<input class="tag" value="" type="text"/>

Answer 3

你可以做這樣的事情

var curval = $('#PhoneTextbox').val(); 
 

 
var $tags = $('.tag').keyup(function() { 
 
    var tags = $tags.map(function() { 
 
    return this.value || undefined 
 
    }).get(); 
 
    tags.unshift(curval) 
 

 
    $('#PhoneTextbox').val(tags); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input id="PhoneTextbox" value="01115468852" type="text" /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" /> 
 
<input class="tag" value="" type="text" />

Answer 4

利用這段JavaScript代碼

var p = $("#PhoneTextbox").val(); 
$(function(){ 
    $('.tag').keyup(function(){ 
     var t = []; 
     t.push(p); 
     $('.tag').each(function(i,e){ 
      if($(e).val().length > 0){ 
       t.push($(e).val()); 
      } 
     }); 
     $("#PhoneTextbox").val(t.join()); 
    }); 
});