我正在使用聊天功能(使用Vue)并使用textarea作为我的输入,因此溢出包装并且对于编写更长消息的用户来说更具可读性。不幸的是,当用户按下键进入并提交时,光标会在提交之前移动到新行,从而使UX感觉不适。有关如何使用vanilla Javascript禁用提交换行符的任何想法?正如您所看到的,我已尝试添加replace()函数,但无济于事。
我的textarea:
<textarea id="btn-input" type="text" class="input-group_input" rows="4"
placeholder="Type your message here..." v-model="body"
@keydown.enter="postReply()">
</textarea>
我的提交方式:
postReply() {
this.$http.post('/api/chat/' + this.session.id + '/replies', {
body: this.body
}).then((response) => {
this.body.replace(/(\r\n|\n|\r)/gm,'');
this.body = '';
this.replies.unshift(response.data);
}).catch((error) => {
})
},
答案 0 :(得分:2)
使用@keydown.enter.prevent="postReply"
。这将阻止enter
键的默认操作,即创建换行符,但仍会调用您的方法。