Lishanming_ 2019-05-16 09:36 采纳率: 0%
浏览 1383
已结题

H5页面模拟微信聊天,表情输入框和系统输入法如何流畅切换

首先,我的难点是:只要输入框聚焦(输入表情,输入文字),就会自动唤醒手机输入,这时候,我的表情输入框和输入法就冲突了。

微信是这样的:
图片说明

输入表情的时候,输入框聚焦了,但是输入法没出现,这个点我想过是不是这个光标是模拟的,其实输入框是失焦的。

输入框代码(contenteditable):

<div contenteditable="true" ref="editArea" class="edit-area" 
     @focus="contentFocus" @blur="contentBlur">
</div>

添加表情的代码:

addImage (e) {
   /** 
   * 点击emoji图片后,复制节点添到当前range里并设置光标和更新range 
   * 若是点到其他地方则设置到之前的位置
   */
     // if (e.target.tagName === 'IMG') {
     let node = e.target.cloneNode(true)

     //如果已经有光标,删除
     let guangbiao = document.querySelector(".edit-area").querySelector(".headerBox")
     if (guangbiao !=null) {
        this.$refs['editArea'].removeChild(guangbiao)
     }
     //这是我模拟的光标
     let cursor = document.getElementById('haha').cloneNode(true)
     this.range.insertNode(cursor)
     this.range.insertNode(node)
     this.setCursor(node, false)
     // } else {
     // this.setCursor()
    // }
},
        setCursor (node, before) {
            /**
            * node 为传入的节点,不传则foucs到之前保存的位置
            * before 控制折叠方向
            */
        // if (node) {
                // 需要新建一个range来添加内容
                let range = document.createRange()
                range.selectNode(node)

                range.collapse(!!before)
                this.selection.removeAllRanges()
                // this.selection.addRange(range)

                // range = this.selection.getRangeAt(0)

                // let cursor = document.getElementById('haha')
                // range.insertNode(cursor)

                // 更新 range
                this.range = range
        // } 
        // else {
        //     this.selection.removeAllRanges()
        //     // 使用之前的
        //     this.selection.addRange(this.range)
        // }
},

我是通过range来做表情(图片)插入的,然后再往rang里加一个模拟光标的元素。

先抛开我的做法,想问问大家的思路,再如果在我的基础上,需要怎么改进。

  • 写回答

1条回答 默认 最新

  • dabocaiqq 2019-05-20 16:17
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能