当前博客:多行编辑框如何根据内容自适应宽高

49 次浏览【转载需注明来源】

博客作者:【快码快问快答】

个性签名:寒窗苦读十年一朝凤舞九天

多行编辑框如何根据内容自适应宽高

 

内容变化了,宽高跟着变化

默认排序
Generic placeholder image
Generic placeholder image
已采纳
qiang Time: 2024-01-15 10:55:03

多行编辑框在内容超出宽度会自动换行,超出高度会有滚动条,不太好实现被文字内容撑开宽度高度,如果你真的需要这个功能,可以用以下方案:

// 做一个占位盒子,盒子大小可以定义一下最小宽度,最小宽度,当多行文本输入的时候,同步文字到此区块,这个区块就会自动撑开,
// 然后多行文本取这个盒子的宽度和高度,可以实现自动撑开的多行文本框
<区块 行内样式="定位: 相对定位">
    <区块 id="占用位置" 行内样式="显示模式: 内联块元素; 最大-宽度: 100%; 自动换行: 字内换行"></区块>
    <多行文本框 id="文本输入" 用户输入回调="同步更改()" 行内样式="定位: 绝对定位; 顶部: 0; 左侧: 0"></多行文本框>
</区块>
<脚本>
    定义函数 同步更改() {
        $("#占用位置").设置或获取内容($("#文本输入").设置或获取值() + "占位");
        $("#文本输入").元素宽度($("#占用位置").元素宽度());
        $("#文本输入").元素高度($("#占用位置").元素高度());
    }
    同步更改();
</脚本>
<换行 />
<换行 />
// 做一个可以  内容可编辑 的区块,虽然不是多行文本,但是效果差不多,都可以实现多行内容输入的功能。
<区块 内容可编辑="真" 行内样式="显示模式: 内联块元素; 最大-宽度: 100%; 自动换行: 字内换行; 边框: #000 1px 实线">测试</区块>

多行编辑框如何根据内容自适应宽高