可擴展文本字段與另一個文本字段合併

Question

我有一排帶有可擴展選項的文本框。點擊展開按鈕...文本字段大小加倍並與相鄰文本字段合併。如果相鄰的文本字段包含值，它將被推送到下一個文本字段。你可以建議我如何做到這一點

Answer 1

以下解決方案並不完美，但它可以幫助你開始。您可以通過運行代碼片段來嘗試。

$("[data-merge-to]").click(function(e) { 
 
    var $this = $(this); 
 
    if ($this.data("merge-to") === "right") { 
 
    var $left = $this.closest(".input-group").find("input").first(); 
 
    var $right = $this.closest("[class^=col-]").next().find("input").first(); 
 
    } 
 
    if ($this.data("merge-to") === "left") { 
 
    var $left = $this.closest("[class^=col-]").prev().find("input").first(); 
 
    var $right = $this.closest(".input-group").find("input").first(); 
 
    } 
 
    var merged = $.grep([$left.val(), $right.val()], function(str) { 
 
    return typeof str === "string" && str.length > 0; 
 
    }).join(" "); 
 
    var lContainer = $left.closest("[class^=col-]"); 
 
    var rContainer = $right.closest("[class^=col-]"); 
 
    var leftW = parseInt(lContainer.attr("class").match(/(?!col-\w{2}-)\d+\b/i)); 
 
    var rightW = parseInt(rContainer.closest("[class^=col-]").attr("class").match(/(?!col-\w{2}-)\d+\b/i)); 
 
    $left.val(merged); 
 
    lContainer.removeClass().addClass("col-xs-" + (leftW + rightW)); 
 
    rContainer.remove(); 
 
    if(lContainer.is(":last-child")) { 
 
    lContainer.find(".input-group-btn:last-child").remove(); 
 
    if(!lContainer.has(".input-group-btn").length) { 
 
     $left.prependTo(lContainer).nextAll().remove(); 
 
    } 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control" value="value 1"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="right"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="left"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     <input type="text" class="form-control" value="value 2"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="right"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="left"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     <input type="text" class="form-control" value="value 3"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

引導程序框架和jQuery用在這裏，但你可以改變這一點。