vue antDesign 文本框 把原回车换行 改成 alt+回车 换行 window(alt)和macos(option)同步
template<a-input placeholder="Basic usage":rows="4"type="textarea"ref="textDom"v-model="message"@blur="handleInputBlur"@keydown.ent
·
template
<a-input placeholder="Basic usage"
:rows="4"
type="textarea"
ref="textDom"
v-model="message"
@blur="handleInputBlur"
@keydown.enter="handleEnter"
@keydown.alt.enter="handleAltEnter" />
script
data(){
return{
blurIndex: undefined,
message: undefined,
flag: false,
isAltEnter: false
}
},
methods:{
handleInputBlur (e) {
if (this.flag) {
this.blurIndex = e.srcElement.selectionStart;
// 把输入的换行符插入到你光标的位置
this.message = this.message.substring(0, this.blurIndex) + '\n' + this.message.substring(this.blurIndex, this.message
.length)
// 重新获取光标
e.srcElement.focus()
this.isAltEnter = true // 设置阻塞状态,因为enter事件仍然会触发
}
this.flag = false
},
handleAltEnter (e) {
this.flag = true
// 失去光标触发事件
e.srcElement.blur()
},
handleEnter (e) {
e.preventDefault() // 阻止默认行为
setTimeout(() => {
if (this.isAltEnter) { //如果为阻塞状态就反转状态
this.isAltEnter = false
}else{
// 回车你想做的事情
}
}, 100)
},
}
更多推荐
已为社区贡献10条内容
所有评论(0)