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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值