miniUI中的mini-textarea自适应问题

优质创作者: Java技术领域

2017-02-06 09:10:24

现在我是把textarea大小直接写固定了，按照输入内容的最大限度写固定了，怎么可以让这个textarea的大小可以根据我内容的多少来显示，而不是直接写固定，如果内容少的话，下面会有很多空白（在textarea只读情况下）

...全文

677 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

miniui textarea高度自适应

在某个项目里面，有这样的一个小需求。 textarea的高度自适应，当高度高于300px之后，textarea高度不再增高，出滚动条。当高度小于某个高度例如80px的时候，高度不再变小。其实这个需求在很多地方都有出现过，例如微博的评论框，还有各种评论框。谈不上什么有难度的技术，写下来当一个小插件积累。

将设置了高度的mini-textarea放在div中，设置div的display为none，然后使用原生js或jQuery将div显示出来，显示出来的div中的textarea只有起始高度，处理此问题的方法如下：在div显示之后，调用textarea的doLayout()方法，重新调整一下局，即可将textarea显示完整。注：不同版本的MiniUI，重新调整布局的方法可能有细微差别，以A...

原理:<div> <pre><span></span></pre> <textarea></textarea></div>将textarea绝对定位，并在oninput事件中，把内容同步到pre的span中，字体，行高设置相同，就能把div撑开。需要注意pre要设定自动换行的

浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法： <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </...

87,994

社区成员

224,693

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章