反馈的问题,即是一个 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 的方式实现草稿功能,从而可以遵从官方文档上的建议:不建议在多行文本上对用户的输入进行修改。
目前找到了一种解决问题的方法:
wxml:
< textarea focus value = "{{ initContent }}" selection-start = "{{ cursorIndex }}" selection-end = "{{ cursorIndex }}" bindinput = "handleContentInput" /> |
js:
draft: ''
onLoad() { // 先获取草稿 draft this.setData({ draft, initContent: draft }); }
this .setData({ draft: value, cursorIndex: cursor });
handleClickSubmit() { // 在需要使用到用户输入内容的时候,去使用 draft,而不是像之前一样使用 content } |