[英]Preventing new line in textarea
I'm working on a chat feature (using Vue) and am using a textarea for my input so the overflow wraps and is more readable for users writing longer messages. 我正在使用聊天功能(使用Vue),并且正在使用textarea进行输入,因此溢出包装起来了,对于编写较长消息的用户更易读。 Unfortunately, when the user keys down enter and submits, the cursor moves to a new line before submitting, making the UX feel off. 不幸的是,当用户按下Enter键并提交时,光标会在提交之前移至新行,使UX感觉良好。 Any ideas for how I could disable the newline on submit using vanilla Javascript? 关于如何使用香草Javascript禁用换行符的任何想法? As you can see, I've tried adding a replace() function but to no avail. 如您所见,我尝试添加了replace()函数,但无济于事。
My 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>
My submit method: 我的提交方法:
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) => {
})
},
Use @keydown.enter.prevent="postReply"
. 使用@keydown.enter.prevent="postReply"
。 This will prevent the default action of the enter
key, which is to created a newline, but still call your method. 这将阻止enter
键的默认操作,该操作将创建换行符,但仍会调用您的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.