zoukankan      html  css  js  c++  java
  • vue可输入div contenteditable,ctrl+enter换行,enter不换行发送

    最近在实现web IM功能,textarea组件不能插入标签,于是使用了可输入div,添加contenteditable=true

    发送按钮常用的快键键就是enter,

    默认浏览器enter会触发换行,使用event.preventDefault()即可阻止浏览器的换行

    但是ctrl+enter,添加 让其换行之后,光标位置却被移动到第一个位置

    以下代码可使ctrl+enter换行并且保留当前光标位置

       <div ref="textarea" class="textarea" contenteditable="true" tabindex="1"  v-if="toIm !== ''" placeholder="请输入"  @keydown="textareaKeydown($event)"></div>
              
          //换行并重新定位光标位置
          textareaRange() { 
            var el = this.$refs.textarea
            var range = document.createRange();
            //返回用户当前的选区
            var sel =  document.getSelection();
            //获取当前光标位置
            var offset = sel.focusOffset
            //div当前内容
            var content = el.innerHTML
         //添加换行符 el.innerHTML
    = content.slice(0,offset)+' '+content.slice(offset)
         //设置光标为当前位置 range.setStart(el.childNodes[
    0], offset+1); //使得选区(光标)开始与结束位置重叠 range.collapse(true); //移除现有其他的选区 sel.removeAllRanges(); //加入光标的选区 sel.addRange(range); },

    //监听按键操作 textareaKeydown (event) { if(event.ctrlKey && event.keyCode === 13){ //ctrl+enter this.textareaRange() }else if (event.keyCode === 13) { //enter this.send(); event.preventDefault() // 阻止浏览器默认换行操作 return false } },
  • 相关阅读:
    面试题21 包含min函数的栈
    面试题20 顺时针打印矩阵
    基于熵的方法计算query与docs相似度
    使用信息检索和深度学习方法的智能对话
    常用的激活函数
    spark实现smote近邻采样
    wide&deep用于ltr排序
    deepfm用于ltr排序
    lightgbm用于排序
    静态工厂方法+服务提供者框架模板
  • 原文地址:https://www.cnblogs.com/suruozhong/p/13491487.html
Copyright © 2011-2022 走看看