vue 取消input回车浏览器自动换行事件

需求：回车自动变成标签放在下面。

最终效果：

碰到的问题：按回车之后文本总是会先有换行符再进方法，导致非空校验无效，因此取消了浏览器回车自动换行行为，问题解决。

template：

                 <el-inputplaceholder="请输入关键词后回车确认"type="textarea"maxlength="10"v-model="keyword"@keydown.native="pushKeyword($event)":rows="4"></el-input><div class="keyword"><el-tagv-for="(tag,index) in feedsForm.keyword":key="tag"closabletype="info"@close="handleClose(index)">{{tag}}</el-tag><span class="length"><span class="num">{{feedsForm.keyword.length}}</span>/ 10</span></div></el-form-item>

js：

data() {return {feedsForm:{},keyword: "",
}，methods:{// 获取关键词pushKeyword(event) {if (event.keyCode === 13) {event.preventDefault(); // 阻止浏览器默认换行操作if (this.keyword && this.feedsForm.keyword.length < 10) {this.feedsForm.keyword.push(this.keyword);}this.keyword = "";return false;}},// 关键词关闭事件handleClose(index) {this.feedsForm.keyword.splice(index, 1);// debugger;console.log(index);}}

vue 取消input回车浏览器自动换行事件相关推荐

vue阻止浏览器默认事件
项目中遇到长按.鼠标右键等操作时,会出发浏览器的默认事件,这时候我们要阻止浏览器默认事件,在vue中阻止默认事件,可以使用 @contextmenu.prevent=""实现
VUE 表单input 框使用@blur事件
** VUE 表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 form表单代码 <el-form-item label="身份证号码:" ...
vue 中 input事件
vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']&quo ...
js禁止移动端浏览器滚动事件以及取消（允许）还原浏览器滚动事件
1.禁止浏览器滚动 document.addEventListener('touchmove', function (event) {event.preventDefault(); }, false) ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
回车触发提交事件
//gridview 文本框回车触发 Button 事件 < script type = "text/javascript" language = "java ...
原生JS实现跨浏览器的事件处理程序
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
vue 禁止显示本网页由、、_【VUE/JS】vue和js禁止浏览器页面后退
1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法和使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ ...

vue 取消input回车浏览器自动换行事件

vue 取消input回车浏览器自动换行事件相关推荐

最新文章

热门文章