使用bootstrap处理大型文本字段的推荐方法是什么？

Question

twitter bootstrap（3和4）文档非常清楚如何处理许多不同的表单输入类型。但是，它缺少有关“大”文本输入字段的元素的推荐方法的信息。例如，键入电子邮件或信件（最好使用最大字符数）。

一般来说，在bootstrap或“现代”HTML / CSS中处理此问题的推荐方法是什么？

Answer 1

而不是使用input field。我建议你使用textarea

示例

<textarea class="form-control">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.
    </textarea>

您可以在输入时使用jQuery调整textarea的大小。 的的jQuery

$("textarea").height( $("textarea")[0].scrollHeight );

<强>的CSS

textarea {
width: 300px;

}

Demo

Answer 2

我认为你要找的是HTML <textarea>元素。这可以像任何其他输入元素一样与Bootstrap一起使用。将其包装在form-group容器中，并将类form-control添加到textarea本身。

Example

不幸的是，textarea元素不接受像输入字段这样的maxlength参数。要使用最大字符数来使用javascript来处理此问题。