JS-chrome中textarea禁止回车换行、获取和设置光标位置

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

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操作完毕后，再进行移动光标的操作。