小程序 textarea 组件的坑

都 2021 年了，微信小程序 textarea 组件还是那么多问题，兼容性问题在 Android 机型（特别是低配置的）上尤为突出...

假设组件如下：

<textarea
  name="postalAddress"
  id="postalAddress"
  rows="3"
  bindinput="inputEvent"
  bindblur="blurEvent"
  bindfocus="focusEvent"
  class="textarea"
  value="{{postalAddress}}"
  placeholder-class="input-placeholder"
  placeholder="请输入"
  confirm-type="done"
  disable-default-padding="{{true}}"
  cursor-spacing="50"
  show-confirm-bar="{{false}}"
  auto-height="{{true}}"
  maxlength="60"
/>

这里就有好多问题...

1. show-confirm-bar 的问题

测试同学发现在红米 4X 上，textarea 组件的“完成”一栏不透明度不是 100%，导致文案与底下文案重叠。然后就想着设成 show-confirm-bar="{{false}}" 来隐藏“完成”栏。

好家伙，新 Bug 又来了。当设置之后，在 Android 上首次聚焦输入框时，会失焦（自动收起键盘）。然后我是这样解决这个 Bug 的：

该 Bug 属于外部原因，小程序组件本身的问题无法解决，所以不作处理。(又解决了一个问题，开心 🤣)

社区相关问题：

2. auto-height 的问题

属性 auto-height="{{true}}" 愿意是想根据内容自适应高度，以提高用户体验。可现实是，用户体验没提高，倒是提高了开发者的开发难度。TMD 又是 Android 机型的问题，在用户失焦之后，textarea 会多了一大部分的空白部分，用户体验倒是没提高，反而出现 Bug 了，擦。

解决方案：去掉 auto-height 属性，使用 CSS 控制 min-height 属性。

社区相关问题：

textarea 设置 auto-height 超出一屏后显示异常？

3. disable-default-padding 的问题

假设我们的设计稿是这样的，多行输入框与其他元素左边对齐，但由于 iOS 上会有个默认的内边距，即使 CSS 设置了 padding-left 等属性也没效果。可以添加一个 disable-default-padding="{{true}}" 属性解决。

3. textarea 原生组件的问题

由于原生组件的特（niao）性，在未支持原生组件同层渲染之前，类似 textarea 等原生组件层级是最高的，无论其他标签设置的 z-index 有多大，均无法覆盖原生组件，唯一解决的方法是使用 cover-view、cover-image 等组件包裹原生组件，但是本身 cover-view 等就一身毛病，它 TM 烦了，毫无开发体验。

关于原生组件，可看文档 native-component。

结合以上问题，于是改成这样子：

<textarea
  name="postalAddress"
  id="postalAddress"
  rows="3"
  bindinput="inputEvent"
  bindblur="blurEvent"
  bindfocus="focusEvent"
  class="textarea"
  value="{{postalAddress}}"
  placeholder-class="input-placeholder"
  placeholder="请输入"
  confirm-type="done"
  disable-default-padding="{{true}}"
  cursor-spacing="50"
  maxlength="60"
/>

The end.

toFrankie / blog