textarea iOS 输入光标交互与 Android 不一致
发布于 5 年前 作者 tangxiulan 1478 次浏览 来自 问答

反馈的问题,即是一个 Bug ,也是一个需求。

背景

需要使用 textarea 组件实现一个具有草稿功能的多行输入框。

目前的实现方式为:

wxml:

<textarea
         focus
         value="{{ content }}"
         selection-start="{{ cursorIndex }}"
         selection-end="{{ cursorIndex }}"
         bindinput="handleContentInput"
/>

JS:

handleContentInput(e)  {
  const { value, cursor } = e.detail;
  this.setData({
     content: value,
     cursorIndex: cursor
   });
}

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

在 iOS 的小程序中,在 textarea 中输入一段话,然后将光标移动到这段话中间的某个位置后修改这段话,修改后 cursor 会返回光标所在位置,但是光标最终还是会跳到这句话的最后。

在 Android 上光标不会跳到最后的位置。

预期表现是光标位置与 Android 上表现一直,即在 cursor 所对应的位置。

* 如何复现?

在 iPhone 上使用丁香医生小程序,从首页点击快速提问,进入写问题页面输入内容即可复现。


如果是需求:

* 你希望有什么能力?

textarea 组件有一个属性可以设置初始值。

* 你需要这个能力的场景是 ?

利用 textarea 实现草稿功能时,不需要利用设置 value 的方式实现草稿功能,从而可以遵从官方文档上的建议:不建议在多行文本上对用户的输入进行修改。

2 回复

目前找到了一种解决问题的方法:

wxml:

<textarea
         focus
         value="{{ initContent }}"
         selection-start="{{ cursorIndex }}"
         selection-end="{{ cursorIndex }}"
         bindinput="handleContentInput"
/>

js:

data: {

 initContent: '',

 draft: ''

}


onLoad() {  

 // 先获取草稿 draft

 this.setData({

   draft,

   initContent: draft

});

}



handleContentInput(e)  {

  const { value, cursor } = e.detail;


  this.setData({
     draft: value,
     cursorIndex: cursor
   });

}



handleClickSubmit() {

 // 在需要使用到用户输入内容的时候,去使用 draft,而不是像之前一样使用 content

}




同样有这个问题

回到顶部