用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-3-3 17:46:58 天下雪原创达人 造轮子 人生巅峰 楼主 218075
这个坑,太巨大,估计一时半会跳不出来。。。就是因为这个坑太大,所以更需要一个综合性的指导贴。。。我这个帖子就聚合一下一些有用的信息;

友情提示:textarea可能出现的问题五花八门,请做好心理准备,本帖只列举了一些可能有解决方案的问题:

官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html
  • bug: 微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
  • tip: textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的bindsubmit。
  • tip: 不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
  • tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的。
  • tip: 请勿在 scroll-view 中使用 textarea 组件。
  • tip: css 动画对 textarea 组件无效。


0.15.152900更新:
F 修复 组件 <textarea /> 不支持样式 min-height、max-height 的问题修复 组件 <textarea /> disabled 属性在默认隐藏再显示情况下不生效的问题

属性名类型默认值说明
valueString输入框的内容
placeholderString输入框为空时占位符
placeholder-styleString指定 placeholder 的样式
placeholder-classStringtextarea-placeholder指定 placeholder 的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度
auto-focusBooleanfalse自动聚焦,拉起键盘。
focusBooleanfalse获取焦点
auto-heightBooleanfalse是否自动增高,设置auto-height时,style.height不生效
fixedBooleanfalse如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
cursor-spacingNumber0指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
bindfocusEventHandle输入框聚焦时触发,event.detail = {value: value}
bindblurEventHandle输入框失去焦点时触发,event.detail = {value: value}
bindlinechangeEventHandle输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinputEventHandle当键盘输入时,触发 input 事件,event.detail = {value: value},bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirmEventHandle点击完成时, 触发 confirm 事件,event.detail = {value: value}


相关文章:

textarea组件默认值绑定data数据真机不显示问题
textarea不能实时保存及里面的值的获取的问题
微信小程序之踩坑之旅二,textarea 组件的 bug(含10M动图)
微信小程序 textarea 简易解决方案
跳坑《一百零七》canvas、textarea、video层级最高的变通方法


相关问题:
textarea默认值显示问
textarea 标签。样式bug
获取焦点的时候键盘弹出来挡住了textarea
textarea在真机上无法自动换行
小程序textarea和地图无法隐藏
同一个textarea,怎么清空他上次输入保留的值
input和textarea的placeholder或输入值浮在另一层view上
关于textarea的一个问题,请教下

相关demo:
hotApp云笔记flex布局怎么实现上中下3行铺满整个页面
微信小程序学习用demo:文笔记+增删改查学习
小程序组件大全(对话框、指示器、五星评分,画廊,toast

相关讨论:此组件BUG较多,所以官方确认的BUG仅为其中的部分BUG
  • Q:Textarea 初始化页面后底部显示“完成”。
    A:微信Android版 6.5.4的bug,会在下个版本修复。
  • Q:出现input和textarea,点击textarea时,无法释放input焦点?
    A:谢谢反馈,这是android微信上的bug,下个版本fix。
  • Q:textarea和placeholder内容会显示在modal上
    A:由于textarea是原生组件实现,层级最高,目前还无法支持在上面覆盖元素这样的交互设计。
  • Q:css的z-index 在iOS真机上无效吗?
    A:map,video,canvas,textarea是原生组件,层级位于webview之上。所以zindex无效。
  • Q:scroll-view里面有textarea,它内容不动(真机环境)。
    A:输入框目前还不能放到scroll-view里面使用。


相关讨论:
textarea如何监听即时变化的value
textarea超过5个字符。我下面的button换个背景色。bindfocus只有聚焦,失去焦点,还有行数变化的事件。有什么其他方法可以实现?

答:


这个返回输入框中的值 event.detail = {value: value}
你可以取到这个值,根据值进行判断,去触发改变Button的颜色的方法
也可以考虑使用input 多一个方法


相关讨论:
textarea的坑
1、原生组件,层级最高,上面不能有其他自定义view,会被透过去;
2、可能也和层级有关,编辑完textarea之后直接点击保存这时textarea还没有失去焦点,导致 bindblur 没有被调用;
   解决:使用 form 方式解决;
3、当表单里有两个textarea时,连续输入后点击按钮无反应
4、直接往 textarea 里传值在 Android 上会概率显示不出来;
    原因:textarea应该是渲染的非常快,value 会在 onload 之后马上被填充,这时如果 value 还没被赋值,就显示为空。
    解决:在 onShow 之后加载 textarea。

5、textarea 不能放在 for 循环里,否则会出现输入其中一项会将另一项的内容冲掉;
6、垂直居中有问题,在 iPhone 上的 padding-top 会比 Android 大很多。
7、当它父亲和爷爷同时使用 table、flex 等相对复杂布局时,会出现满行换行时上一行会被清空的奇怪问题。

相关讨论:
video textarea 有BUG对 video textarea 这两个组件进行 visibility:hidden; 调试窗口可以  但是真机测试 无效! iPhone5 手机
隐藏组件考虑使用组件的公共属性hidden,对应文档在 组件-基础组件-共同属性类型刚刚用测试机试了一下,安卓环境下 visibility: hidden 可以正常工作,但是 iphone 环境下会失效。请 LZ 考虑先使用 hidden 属性 + 空白占位块 的解决方案


相关讨论:
微信小程序textarea bug extarea里面输入文字后,外面有绝对定位的 view 的 z-index 不起作用,文字回显示在最上层,如果没有文字就不会出现这个问题
textarea 有个fixed属性


相关讨论:
让人头痛的textarea啊
[AppleScript] 纯文本查看 复制代码
<form bindsubmit="onSubmit">
<input name="title"/>
<textarea name="content">textarea>
<button type="primary" formtype="submit">发布button>
form>
上面这个表单在安卓机上按如下操作会造成不触发 submit事件
第一步:点击 input 使其获取焦点
第二步:点击textarea使其获取焦点
第三步:不论上两步是否输入了内容,这时点击 虚拟键盘 右上角的向下箭头关闭虚拟键盘
第四步:点击 button

这时候就不会触发 submit事件了。
PS:这里说明一下复现的原理,点击input弹出软键盘,然后不点击"完成",直接点击textarea区域,让软键盘一直存在,会出现input的焦点无法消失,从而出现以上所说的情况出现

如果再次点击 input,然后点击其他地方使其失去焦点。则会立刻触发submit。(点击input后点击textarea好像并不能让input失去焦点)

这个问题主要造成了安卓机器上某些场景表单无法正常提交。

自己测试了几次,得出的结论是:
当input聚焦时,如果没有按“完成”去让input失去焦点的话,再点击textarea就会出现input和textarea同时存在焦点
从input切换到textarea,input没有失焦,这是微信Android版6.5.4的已知问题,下个版本修复

相关讨论:
textarea 在安卓上显示有误
多行输入框,输入完之后,显示时候实际文本只显示在一行内。
再次点击输入,键盘弹出后,文本框位置偏离,无法看见输入值。

在『小程序示例』里的textarea即可复现此bug
确实存在这个问题,目前处理方式不要在textarea里设计值上下的padding情况会好些!


相关讨论:
textarea disabled="true" textarea    disabled="true"  iphone5里面无效果 还是能输入
布尔值要加 {{ }}
disabled="{{ true }}"


相关讨论:
安卓机textarea的bindblur方法经常无法生效 部分安卓机textarea的bindblur方法经常无法生效,导致读取不到textarea里面的数据。  iPhone机基本没有此问题。
这个问题应该是先触发了 button 的 tap 事件, 再触发textarea 的 blur 事件

解决方法
  • <textarea /> 和按钮都放在 <form /> 中, 通过 bindsubmit 获取textarea的值
  • 提供 bindinput 实时获取输入




相关讨论:
textarea获取焦点后被输入法挡住一部份,不能完全显示
现在有新的属性可以控制了  cursor-spacing
指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

新增讨论:
在<view wx:for="">中生成多个textarea
在<view wx:for="">中生成多个textarea,iphone出现placeholder无法显示,及录入内容竖状显示。
如下图所示,其中A,B,C,D为4个textarea,写法为:
<textarea id="textarea_{{index}}" placeholder="请输入选项内容" style="padding-top:10rpx;padding-bottom:10rpx;font-size:30rpx;" auto-height="true" maxlength="-1" />

由下图可见,
  • placeholder"请输入选项内容"并未显示出来。
  • 在A中输入“四川”两个字,只能竖着显示不全的两个字

1.jpg
所使用的手机为iphone6 系统版本iOS10.3.1
(安卓机和开发工具中显示正常)

答:文西湖里
设置了自动增高以后,需要设置 width

新增讨论;input 和textarea忍了很久的一个问题
如果已经输入了一段文字或者paste了一段文字,想在前面或中间插些字,但每次输入完一个词,光标就会跳到最后,还得把光标重新调到需要插文字的地方。每个词都要这样。

这是小程序本身的问题,还是我自程序的问题,是否和我使用了bindinput 相关?有什么方法能解决?


答:Jason
这个问题我猜应该是你把value 绑定了,然后在bindinput 里实时更新;

就别绑定bindinput 事件了,在blur 事件里处理,我这边完美解决。


新增讨论:textarea严重bug
当button 在textarea上时,button不能点击。我是醉了,我一个控件一个的排除,花了我2个小时,结果发现textarea的问题,把 textarea属性设置成disabled="{{true}}" focus="{{false}}",button 还是没有反应。
111.jpg
答:YJFn
可能你没有仔细看文档
113.png
button是盖不住它的
可以试试条件渲染
112.png



有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
本帖最后由 sela 于 2017-3-4 14:46 编辑

针对 form表单里有input 和textare时 先点击input再点击textarea中form表单无法发请求
上面这个表单在安卓机上按如下操作会造成不触发 submit事件
第一步:点击 input 使其获取焦点
第二步:点击textarea使其获取焦点
第三步:不论上两步是否输入了内容,这时点击 虚拟键盘 右上角的向下箭头关闭虚拟键盘
第四步:点击 button
这时候就不会触发 submit事件了。


我看极简笔记小程序貌似可以~  不知道谁有啥替代方案

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 账号升级

查看全部评分

sela 发表于 2017-3-4 14:44
针对 form表单里有input 和textare时 先点击input再点击textarea中form表单无法发请求上面这个表单在安卓机 ...

同学,研究出来了没  
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册