miniUI中的mini-textarea自适应问题

优质创作者: Java技术领域

2017-02-06 09:10:24

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

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

miniui textarea高度自适应

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

原理:<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"> </...

Layout的设计模板模式 mvc的模板特别类似设计模式中模板方法模式，结合Layout中RenderSection和RenderBody方法可以将部分html展现逻辑延迟到具体的视图页面去实现里面实现。结合我们增删改查的逻辑，我们的用户界面，我们将页面分为这几个区域，实现部分逻辑以后，部分留给具体的页面去实现。例如图片中新增，编辑，删除，导入，导出，查询都是架构自带的操作，至于复制就给页面...

87,993

社区成员

224,694

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章