Bootstrap Eingabegruppe Textbereich mit Schaltfläche

Question

Ich versuche, eine einfache Submit-Eingabegruppe zu implementieren. Im Moment habe ich die folgenden:

<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>

Ich möchte den ‚Senden‘ Button die gesamte Höhe des Textbereichs zu übernehmen. Ist das machbar?

Answer 1

Was Sie tun müssen, ist das input-group-addon Dienstprogramm zu verwenden. Dadurch kann der Platz der Schaltfläche die gesamte Höhe einnehmen. Sie müssen die Füllung anpassen, da sie nur bei Hover (der Farbänderung) funktioniert. Ich würde empfehlen, alle relevanten Klassenstile zu kopieren und eigene zu erstellen (für die Farbe und die Hintergrundfarbe, damit es nicht der Standard-Bootstrap-Stil ist).

<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>

Ich weiß, es mit Bootstrap-Dokumentation nicht im Einklang ist, aber ihre Dokumentation vorausgesetzt, dass Sie nicht ein Textfeld verwenden.

Answer 2

Nur um Aibreans Antwort näher zu erläutern und weiter zu klären, wie man sein/ihr span Tag betriebsbereit machen kann.

Wir müssen den Bereich an einen Ereignis-Listener binden, im Beispiel unten verwende ich 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>