v-if="submitCommond ==='enter'" id="messgae_input" v-model="currentMessage" class="border-none" type="textarea" autofocus rows="7" :readonly="loading" placeholder="請輸入內容" @keyup.enter.exact="keyEnter($event)" @keyup.ctrl.enter="lineFeed($event)" /> <textarea v-if="submitCommond === 'ctrl'" id="messgae_input" v-model="currentMessage" class="border-none" type="textarea" autofocus rows="7" :readonly="loading" placeholder="請輸入內容" @keyup.ctrl.enter.exact="keyCtrlEnter($event)" @keyup.enter.exact="lineFeed($event,'enter')" /> keyCtrlEnter(event) { this.btnIsDisabled() this.setSubmitBtnDisabled() this.getSubmitBtnIsDisabled() // console.log('ctrl' + this.loading) if (this.submitCommond === 'ctrl' && !this.submitBtnDisabled && !this.loading && this.haveMessage) { this.loading = true this.submitNewMsg() event.preventDefault() } }, lineFeed(event, ctrl) { if (ctrl === 'enter') { return } // console.log('換行') // console.log(this.currentMessage) event.preventDefault() this.currentMessage = this.currentMessage + '\n' },
1.不能使用el-textarea,沒法設置exact,
而設置 @keyup.ctrl.enter.exact="keyCtrlEnter($event)"能夠解決按 ctrl+enter仍然觸發enter事件的問題。this
2.textarea須要設置autofocus自動獲取焦點,才能實現enter或ctrl+enter發送。
3.enter發送過程當中,設置loading變量監聽發送狀態。 將變量賦給readonly屬性來禁止發送時輸入。注意:不能使用disable屬性來禁止發送,disabled在發送後會自動失去焦點。必需要再次點擊textarea才能再次獲取到焦點,而readonly就不會發送後自動失去焦點。code
4.textarea默認enter換行,因此在enter和ctrl+enter時,若是使用enter換行不須要再對數據設置n事件