vue 取消input回车浏览器自动换行事件
需求:回车自动变成标签放在下面。最终效果:碰到的问题:按回车之后文本总是会先有换行符再进方法,导致非空校验无效,因此取消了浏览器回车自动换行行为,问题解决。template:<el-inputplaceholder="请输入关键词后回车确认"type="textarea"maxlength="10"v-model="keyword"
·
需求:回车自动变成标签放在下面。
最终效果:
碰到的问题:按回车之后文本总是会先有换行符再进方法,导致非空校验无效,因此取消了浏览器回车自动换行行为,问题解决。
template:
<el-input
placeholder="请输入关键词后回车确认"
type="textarea"
maxlength="10"
v-model="keyword"
@keydown.native="pushKeyword($event)"
:rows="4"
></el-input>
<div class="keyword">
<el-tag
v-for="(tag,index) in feedsForm.keyword"
:key="tag"
closable
type="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);
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)