49 次浏览【转载需注明来源】
博客作者:【快码快问快答】
多行编辑框如何根据内容自适应宽高
内容变化了,宽高跟着变化
多行编辑框在内容超出宽度会自动换行,超出高度会有滚动条,不太好实现被文字内容撑开宽度高度,如果你真的需要这个功能,可以用以下方案:
// 做一个占位盒子,盒子大小可以定义一下最小宽度,最小宽度,当多行文本输入的时候,同步文字到此区块,这个区块就会自动撑开, // 然后多行文本取这个盒子的宽度和高度,可以实现自动撑开的多行文本框 <区块 行内样式="定位: 相对定位"> <区块 id="占用位置" 行内样式="显示模式: 内联块元素; 最大-宽度: 100%; 自动换行: 字内换行"></区块> <多行文本框 id="文本输入" 用户输入回调="同步更改()" 行内样式="定位: 绝对定位; 顶部: 0; 左侧: 0"></多行文本框> </区块> <脚本> 定义函数 同步更改() { $("#占用位置").设置或获取内容($("#文本输入").设置或获取值() + "占位"); $("#文本输入").元素宽度($("#占用位置").元素宽度()); $("#文本输入").元素高度($("#占用位置").元素高度()); } 同步更改(); </脚本> <换行 /> <换行 /> // 做一个可以 内容可编辑 的区块,虽然不是多行文本,但是效果差不多,都可以实现多行内容输入的功能。 <区块 内容可编辑="真" 行内样式="显示模式: 内联块元素; 最大-宽度: 100%; 自动换行: 字内换行; 边框: #000 1px 实线">测试</区块>
不能恶意举报,否则进行封号处理!
测试账号
qiang Time: 2024-01-15 10:55:03
评论ID
多行编辑框在内容超出宽度会自动换行,超出高度会有滚动条,不太好实现被文字内容撑开宽度高度,如果你真的需要这个功能,可以用以下方案: