需求一: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);
})
小伙伴,有帮助的话记得点赞哦~

文章详细描述了在Vue.js应用中如何修改textarea的默认行为,使其在用户按下回车键时发送内容,而不是换行。对于中文输入,确保字母输入完成后才发送。同时,实现了Ctrl+Enter作为换行的快捷方式。文章还提供了代码示例和对键盘事件的处理,包括`keydown`事件监听和光标位置的管理。
6179

被折叠的 条评论
为什么被折叠?



