帶有按鈕的自舉輸入組textarea

Question

我想實現一個簡單的提交輸入組。目前，我有以下幾點：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="input-group"> 
 
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea> <span class="input-group-btn"> 
 
            <button class="btn btn-primary">        
 
             <span>Send</span> 
 

 
    </button> 
 
    </span> 
 
</div>

我想要的「發送」按鈕佔用文本區域的整個高度。這是可行的嗎？

Answer 1

您需要做的是使用input-group-addon實用程序。這將允許按鈕的空間佔據整個高度。您將需要調整填充，因爲它僅適用於懸停（顏色更改）。我建議複製所有相關的類風格並製作自己的（對於顏色和背景顏色，所以它不是默認的Bootstrap樣式）。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="input-group"> 
 
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea>  
 
    <span class="input-group-addon btn btn-primary">Send</span> 
 
</div>

我知道這是不是與引導文檔線，但沒有使用一個textarea他們的文檔假設。

Answer 2

只是爲了闡述Aibrean的回答，並進一步闡明如何使他/她的span標籤可操作。

我們需要將跨度綁定到事件偵聽器，在下面的示例中我使用了jQuery。

; (function ($) { 
 
    $('#submitMyForm').on('click', function() { 
 
    //$('#myForm').submit(); // js fiddle won't allow this 
 
    alert("form submitted"); 
 
    }); 
 
    
 
})(jQuery)

#exampleWrapper { 
 
    padding: 100px; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="exampleWrapper"> 
 
    <form id="myForm" method="POST" action="?process-form"> 
 
     <div class="input-group"> 
 
      <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea> 
 
      <span class="input-group-addon btn btn-primary" id="submitMyForm">Send</span> 
 
     </div> 
 
    </form> 
 
</div>