微信小程序textarea多行输入框文字穿透--解决方式

最新推荐文章于 2024-06-27 10:20:38 发布

原创

最新推荐文章于 2024-06-27 10:20:38 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了微信小程序中textarea多行输入框文字穿透问题的解决方法。通过创建一个与textarea样式一致的view，在点击时切换显示，实现输入时textarea显示并自动获取焦点，完成输入后隐藏textarea并将内容赋值给view，确保界面平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路：

写一个view，跟需求样式一致，点击的时候，view隐藏，textarea显示出来一样的样式，一样的大小，让他出现的时候自动获取焦点，键盘弹起，输入内容，点击完成，失去焦点后，textarea隐藏，赋值给view，view出现，切换看不出来大的变化，问题解决。

弹框遮住了2个textarea 解决方案为修改一下类名
假如页面有一个textarea 多行文本框只需要设置一遍类名即可

住：因为我写了二个输入框,第二个有点小问题先输入第二个的话再次点击弹框的话会穿透文字
如果是获取后台的数据bindinput可能会冲突-目前还不知道怎么解决

Html部分
第1个view

<textarea 
wx:if="{
   
   {hiddenmodalput == false}}" 
value='{
   
   {textareaVal}}' 
fixed='true' type="text" 
bindinput="addresss" 
bindblur="getout" 
focus="{
   
   {Focus}}" 
style="100rpx;width:100%;" 
placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元" placeholder-class="color:rgb(204,204,204)"></textarea>
    

<view 
bindtap='isfouce' 
class="solo" 
wx