el-input textarea输入框 字体英文输入问题、回车提交、ctrl+enter换行等问题

2 篇文章 0 订阅

需求一:textarea输入框 回车改发送(中文下字母输入时,回车直接发送)
关键点:两个方法@keydown.enter.native @input; 以及延时获取内容时机

<el-input
            ref="inputDiv"
            class="textarea"
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="question"
            :rows="1"
            @input="inputWay"
            @keydown.enter.native="carriageReturn($event)">
          </el-input>
	inputWay(val) {
	  this.question = val
	},
	 // 回车不换行 变成发送消息
    carriageReturn() {
      let e = window.event || arguments[0];
      // 英文下|中文下: 13 Enter Enter
      // 中文下有文字没进入输入框情况是:299 Enter Enter
      // console.log(e);
      if (e.key == "Enter" || e.code == "Enter" || e.keyCode == 13) {
         e.returnValue = false;
         this.sureSendWay()
         return false;
      }
    },
    sureSendWay() {
      var that = this
      setTimeout(() => { // 就是为了修改js执行的时机 及微任务宏任务的转换
      	// 可以写发送事件了
      }, 0)
    }

需求二:textarea输入框 回车改发送(中文下字母输入时,回车时字母进入输入框,再次点击再发送);ctrl+enter设置换行

关键点:键盘的输入状态e.keyCode、e.metaKey

<el-input
            ref="inputDiv"
            class="textarea"
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="question"
            :rows="1"
            @keydown.enter.native="carriageReturn($event)">
          </el-input>
 // 回车不换行 变成发送消息
    carriageReturn() {
      let e = window.event || arguments[0];
      // 英文下|中文下: 13 Enter Enter
      // 中文下有文字没进入输入框情况是:299 Enter Enter
       if (e.key == "Enter" && e.code == "Enter" && e.keyCode == 13) {
        if (!e.metaKey) { // e.metaKey == true证明是ctrl+enter
          e.returnValue = false;
          this.sureSendWay()
          return false;
        } else {
          this.question = this.question + '\n';
        }
        
      }
    },
    sureSendWay() {
      var that = this      	
      // 可以写发送事件了
    }

-----------------------------------------------------2023/6/26更新
需求优化:换行可以在文字中间换行,而不是只能在最后换行
只需把上面的 this.question = this.question + '\n';换成下面的代码

let dIndex = e.srcElement.selectionStart // 光标所在位置
that.question = that.question.slice(0, dIndex) + '\n' + that.question.slice(dIndex)
that.$nextTick(() => { // 设置光标位置
    e.srcElement.selectionStart = dIndex + 1
    e.srcElement.selectionEnd = dIndex + 1
    console.log(e.srcElement.selectionStart);
})

小伙伴,有帮助的话记得点赞哦~

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值