Html 带按钮的 Bootstrap 输入组 textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24557828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap input-group textarea with button
提问by Scalahansolo
I am trying to implement a simple submit input group. I currently have the following:
我正在尝试实现一个简单的提交输入组。我目前有以下几点：
<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>I want the 'Send' button to take up the entire height of the text area. Is this doable?
我希望“发送”按钮占据文本区域的整个高度。这是可行的吗？
回答by Aibrean
What you need to do is use the input-group-addonutility. This will allow the space of the button to take up the entire height. You will need to adjust the fill because it only works on hover (the color change). I'd recommend copying all the relevant class styles and make your own (for the color and background color so it's not the default Bootstrap style).
您需要做的是使用该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>I know it's not in line with Bootstrap documentation, but their documentation assumes you aren't using a textarea.
我知道它不符合 Bootstrap 文档，但他们的文档假设您没有使用 textarea。
回答by zanderwar
Just to elaborate on Aibrean's answer and to further clarify how to make his/her spantag operable.
只是为了详细说明 Aibrean 的答案并进一步阐明如何使他/她的span标签可操作。
We will need to bind the span to an event listener, in the example below I use jQuery.
我们需要将 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>回答by Mamoon Shehzad
Lets suppose we want to create a textarea with a GO button at the left(at the start) and the search sign at the right(end). here is the code to do so using bootstrap
假设我们要创建一个文本区域，左侧（开始处）有一个 GO 按钮，右侧（结束处）有一个搜索标志。这是使用引导程序执行此操作的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Creating a button in text area using bootstrap
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" class="form-control" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
