说说小程序中textarea的坑

昨天有群友在问:小程序里textarea不能输入文字是怎么回事儿

textarea确实有不少坑,今天给大家分离一下常见的几个坑:

1、无法获取焦点

有很多用户都给我家小程序客服反馈,说是页面无法输入内容,集中在微信6.6.7版本,之前的微信版本都正常。

经过多次测试,发现是部分安卓用户无法让textarea获取焦点,可以看这个帖子:https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000282f680c580ef74d6575d555400

解决方法:

给textarea添加focus属性,然后绑定事件(bindtap),当用户点击textarea时,让textarea自动获取焦点即可。

2、textarea层级太高

在小程序中,有些是系统组件,层级很高,比如:map、video、canvas、camera、live-player、live-pusher等,没办法用定位+z-index的形式来遮罩这些组件。

因此,在自定义dialog时,经常会出现dialog无法遮罩住textarea组件。

解决办法:

1、使用cover-view组件,可覆盖的原生组件,包括textarea。

2、可以换种思路:是把textarea隐藏,替换成text标签进行显示,关闭dialog时,再把textarea组件显示出来。

3、手写输入法没有保存内容

input和textarea都有一个共同的问题,用户使用手写输入法时,bindinput无法获取到用户输入的内容。

解决办法:

再添加一个bindblur事件,可以获取到手写输入法的内容。

(手写输入法,bindinput获取不到输入内容)

4、光标闪烁问题

input和textarea在输入内容时,如果在bindinput事件时,通过调用setData保存输入的内容,光标就会自动跑到最后去,这也是个大坑。

解决办法:

1、不调用setData,用event来获取form表单内容

2、setData时,设置另一个值。或者直接用this.data.xxx = e.detail.value,这种情况只会把赋值,不会重新渲染view

(setData时,光标bug截图)

《完》

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2018-08-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

Vue-router(路由)

2.定义(注册)路由跳转的组件----使用全局扩展的方式,用其他创建组件的方式也可以 在这里,进行了一个赋值操作,用一个变量名保存组件中所有的内容

1412
来自专栏小樱的经验随笔

基于Windows下python3.4.1IDLE常用快捷键小结

安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器。 IDLE默认不能显示行号,使用ALT+G 跳到对应...

3916
来自专栏游戏杂谈

推荐一款移动端的web UI控件 -- mobiscroll

用mobiscroll 可实现ios系统自带的选择器控件效果,支持几乎所有的移动平台(iOS, Android, BlackBerry, Windows Ph...

1534
来自专栏码农阿宇

html中的div span和frameset框架标签

Div和span 1.      div独占一层,由div九不允许有别的。 2.      span标签不是独自占用一行,span一般用来设置字体。 框架标签:...

4209
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

1601
来自专栏超然的博客

mpvue-小程序之蹲坑记

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应...

6572
来自专栏从零开始学自动化测试

Selenium2+python自动化29-js处理多窗口

前言 在打开页面上链接的时候,经常会弹出另外一个窗口(多窗口情况前面这篇有讲解:Selenium2+python自动化13-多窗口、句柄(handle)),这样...

3134
来自专栏vue学习

22、商品列表页

(3)商品列表 对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

3723
来自专栏前端新视界

Vue.js 系列教程 3:Vue-cli,生命周期钩子

原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教...

3385
来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

2315

扫码关注云+社区

领取腾讯云代金券