收藏
回答

textarea iOS 输入光标交互与 Android 不一致

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 textarea 客户端 iOS 6.6.1(之前版本也有这个问题) 1.9.6


反馈的问题,即是一个 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 的方式实现草稿功能,从而可以遵从官方文档上的建议:不建议在多行文本上对用户的输入进行修改。

最后一次编辑于  2018-02-06
回答关注问题邀请回答
收藏

2 个回答

  • 2018-02-07

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

    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

    }





    2018-02-07
    有用
    回复 1
    • johon
      johon
      2018-07-19

      同样遇到这样的问题,官方是否已经修复 了?

      2018-07-19
      回复
  • 珂琦
    珂琦
    2018-02-02

    同样有这个问题

    2018-02-02
    有用
    回复
登录 后发表内容