微信小程序怎样设置textarea文本域输入?

微信小程序怎样设置textarea文本域输入?,第1张

解决微信小程序怎样设置textarea文本域输入的步骤如下:

1.第一步,打开微信小程序开发工具,在指定的wxml文件中插入一个textarea组件,脊唯数设置最大长度、失去焦点事件等。

2.第二步,在界面对应的JavaScript文件,添加失去焦点事件,并获取文本域文字山笑内容

3.第三步,接着保存代码并在模拟器中预览界面显示效果,可以看到一个文本域。

4.第四步,在文本域组件中输入相应的文字内容,尽可能输入多的内容。

5.第五步,接着在浏览器的控制台下方,查看打印的结果值,跟文本域中的一致。

6.第六步,最后再输入其他的文字内容,由于限制了文本域的最大输入长度,边输樱首入边查看结果。这样就解决了微信小程序怎样设置textarea文本域输入的问题了。

这里遇到的问题,是动态textarea列表,底部提交按钮position:fiexd悬浮。在滑动页面,textarea文本框友仿中的文字会穿透到提交按钮上方,显示出来。这个问题困扰我好久,试了很多方法不管用,今天终于解决了,赶快记下来。

下面是提交按钮的wxss样式:

下面是提交按钮的wxml样式乱告哗:

开始在textarea文本框上下功夫,想利用d出层类似的方案来解决这个穿透问题,但是最终宣告失败。

网上查,z-index分别在子层级,和父层级上设置这个属性,哪个值大,哪个层级就在最上面。

于是我在textarea上,设置z-index:0,这样,在模拟器上运行就没问题了,但是iOS真机就无效了。z-index会失去作用。textarea输入的内容还是会浸透在遮盖在textarea上的布局。后来查阅官方文档,发现用cover-view可以解决。

原生组件说明官方文档

于是,我把底部提交按钮的view控件,换成了cover-view

运行结果,还是不行,又将cover-view动态样式里加上z-index:999,问题才解决。

红框就是备注textarea中的内容,当d窗d出,内容就会穿透出来。这时用上面的z-index方面就失效了,也搞不懂是什么原因,于是通过改textarea显示方式来解决穿透问题。

思路:就是当d窗d出的时候,设置一个值为true,在textarea做wx:if判断那个哗行值为true时,证明d窗d出,把textarea改成text显示即可。

这样,d窗穿透问题就解决了。


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

原文地址: http://outofmemory.cn/yw/12310286.html

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

发表评论

登录后才能评论

评论列表(0条)

保存