如何在 Bootstrap 的 textarea 中设置灵活的行数？答案

【问题标题】：How to set flexible number of rows in textarea in Bootstrap?如何在 Bootstrap 的 textarea 中设置灵活的行数？
【发布时间】：2021-09-13 20:47:32
【问题描述】：

我正在使用textarea，我们可以使用 Bootstrap 键入任何我们想要的内容。但是，它的高度默认设置为 3 rows。我想让它变得灵活。当用户超过 3 行时，我希望文本区域扩大。而是出现一个滚动栏。我知道，文本区域是响应式的，用户可以拖动并调整其大小。但是，我要添加一个打印选项，用户可以在其中获得他们输入的内容的 pdf。因此，有限的行功能是一个障碍。

这是我的代码：

<!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.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Index</title>
</head>

<body>
    <div class="container">
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 5rem;">S</span></div>
        </div>
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 2rem;">STRENGTHS</span></div>
        </div>
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 2rem;">
                    <form>
                        <div class="form-group">
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </form>
                </span></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
        crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

我认为这就是你需要的：

$(document).ready(function () {
    $('textarea').on('input', function () { 
        this.style.height = 'auto'; 
        this.style.height = (this.scrollHeight) + 'px'; 
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea autocomplete="off" style="resize:none; overflow:hidden;"></textarea>

【讨论】：

您必须使用堆栈片段添加一个工作示例
js部分要在哪里添加？
您可以将其添加到正文中，也可以创建一个新的 file.js 并从 html 的头部调用该文件，例如：<script src="Path/file.js"></script>
我这样做了，但它不起作用。你能在我的sn-p中添加代码吗？
你添加了 jquery 吗？我可以看看你的脚本吗！？