最近公司项目中要求制作在线聊天服务,其中输入框的需求:

1.单按回车发送消息

2.ctrl/command+回车换行

但是textarea本身带有的功能和需求相反,所以只有对js事件进行处理

 

1.禁止textarea单按回车时换行

项目是用vue编写,所以无需对event的keyCode判断是否按了ctrl或meta,模板如下:

<textarea
   v-model="text"
   class="textarea"
   @keydown.enter.exact="submit"
   @keydown.ctrl.enter="addNewLine"
   @keydown.meta.enter="addNewLine"
></textarea>

要注意的是@keydown.enter.exact指的是只按下enter,这个exact修饰符很重要

(没有根据event的keyCode判断也是偷个懒。。正确的做法是根据当前浏览器环境,是win的话,响应ctrl,mac响应meta)

-------

下面的是submit(单按enter)的处理

methods: {
    submit(e) {
      if (window.event) {
        window.event.returnValue = false
      } else {
        e.preventDefault()
      }

      // 提交后的业务逻辑
    }
}

其中window.event是ie的方法,chrome则使用e.preventDefault()进行对回车截断

 

2.在textarea中光标后加换行符

先上全部的代码

    addNewLine(e) {
      // 1.获取光标位置
      const ele = e.target
      const cursorIndex = ele.selectionStart

      // 2.光标后加入换行符
      let temp_text = this.text.split('')
      temp_text.splice(cursorIndex, 0, '\n')
      this.text = temp_text.join('')

      // 3.移动光标
      Vue.nextTick(() => {
        ele.selectionStart = ele.selectionEnd = cursorIndex + 1
      })
    }

 

1)获取光标位置是由这个textarea对象的 selectionStart 获取的,上述代码中e.target是获取了textarea这个对象,当然也可以用this.$refs.xxx.$el 或 document.getElementById 等返回的对象获取光标位置

 

2)在光标后加入换行符,思路是将文字全部转换为数组,然后在数组所属光标处加入\n,再转换为字符串

 

3)移动光标时要注意,因为Vue响应式,在修改了text的值后,如果立刻执行移动光标,则紧接着就会因为重新设置了text的值,光标会移动到最后,所以要等dom操作完毕后,再进行移动光标的操作。

Logo

前往低代码交流专区

更多推荐