解决微信小程序怎样设置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窗穿透问题就解决了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)