我有一个元素textarea
,它从数据库接收信息。文本可以变化,可以是 2、3、4...n 行文本,所以我希望当在 中获得的信息时textarea
,它会自动调整并显示所有的文字。
代码:
<table class="table table-sm mb4">
<thead>
<tr>
<th width="22%">Nombre </th>
<th width="22%">Tipo </th>
<th width="23%">Beneficios</th>
<th width="23%">Descripcion de elementos involucrados</th>
</tr>
</thead>
<tbody>
@foreach ($referencia as $item)
<tr>
<td><textarea name="nombre[]" placeholder="... ... ...">{{$item->nombre}}</textarea></td>
<td><textarea name="tipo[]" placeholder="... ... ...">{{$item->tipo}}</textarea></td>
<td><textarea name="beneficio[]" placeholder="... ... ...">{{$item->beneficio}}</textarea></td>
<td><textarea name="descipcion[]" placeholder="... ... ...">{{$item->descipcion}}</textarea></td>
</tr>
@endforeach
</tbody>
这是我随机输入的数据,但第一行实际上有更多的文本,你可以看到它只显示了其中的一部分。
客观的:
我们从每个
textarea
可以具有可变长度内容的事实开始,因此固定平均值对我们没有帮助,因此我们可以使用:scrollHeight
根据La Mozilla Developer的说法,它是元素中内容的总度量,考虑到由于overflow
隐藏部分内容而未显示的内容。所以我们这样做:
textarea
并将它们存储在一个变量中height
height
受让人将由内容本身(在本scrollHeight
例中为文本)赋予其父框或容器框的总高度分隔none
视觉上的结果如下:
用这个简单的代码解决了,每次在 textarea 中进行换行时,样式都会被注册到 textarea
实现此目的的一种方法是计算
javascript
和 的高度之textarea
和,scroll
并将此结果应用于元素的高度。例如,已将一个类添加到将应用它
autoheight
的元素中。textarea
在示例中,假设不知道哪一个将成为行中最高的元素,因此它们遍历所有具有该类的元素,autoheight
并收集最高值以将其应用于所有元素,并且它们具有相同的高度。不同的高度显示在控制台上。