微信小程序textArea输入框随着输入字数自适应高度

微信小程序textArea输入框随着输入字数自适应高度,第1张

wxml文件厅纯内容

fixed='true' 如果 textarea 是在一个 position:fixed 的区域,需要显衫穗示指定属性 fixed 为 true

contenteditable="true" 是否自动增高,设置auto-height时,style.height不生效

placeholder-style 指定 placeholder 的样式

placeholder 输入框为空时占位符

wxss文件内或伏卜容

(1)、使用 contenteditable 属性锋喊,可让 div 具有编辑输入效果

(2)、模拟 placeholder 的提示效果,此处直接用 CSS 实现

(3)、contenteditable 在IOS上有兼容性,虽然能聚焦,但是不能输入内容,此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性

(4)、缺点:获取 div 文本的时候,内部会包含一些HTML标签,所以需要单独处理转译的数据,才能正常使用数据

(1)、设置一个 div 与 textarea 同层级,外层包裹一个 div ,定位为 relative

(2)、textarea 绝对定位,宽度高度均为 100%,相对于父层 div 来说

(3)、内部 div,设置为 relative,困基派 在检测 textarea 的 onchange 事件的时候,把文本填充到内部 div 里面,以此来撑开父层 div 的高度和宽度

(4)、给内部 div 设置 不可见属性,visibility:hidden,这样 div 是看不见的,但是它的物理位置是存在的,所以能够撑开父层 div

(5)、该方案相对于方案一来说,更简便和完美,尤其是需要获取输汪贺入内容的时候


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12500633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存