vue input相关问题

本文主要讲解input常见使用以及使用过程中遇到的问题。

1. input输入框禁止显示历史记录

在输入input时会显示原来输入的内容，禁止这种情况只需要在input加入:

autocomplete="off"

2. input失去焦点监听以及按回车键失去焦点处理

vue:

<input @keyup.enter="$event.target.blur" @blur="blurfunction" />

blurfunction() {

  处理逻辑

}

3.修改input placeholder文字颜色

placeholder是css3中表单元素input的一个占位符,通过下面几行代码修改placeholder文字的颜色。

修改所有的input:

::-webkit-input-placeholder { color: red; }

:-moz-placeholder { color: red; } //火狐18-

::-moz-placeholder { color: red; } //火狐19+

:-ms-input-placeholder { color: red; }

修改某个标签(在input上加个id):

#myInput::-webkit-input-placeholder { color: red; }

#myInput:-moz-placeholder { color: red; }

#myInput:-ms-input-placeholder { color: red; }

4.Vue项目input框得到焦点选中文字

<input v-model='value' @focus="focus($event)">

//得到焦点选中

focus(event) {

  event.currentTarget.select()

}

简洁写法:

<input v-model='value' @focus="$event.target.select()">

请记住，如果您的输入位于组件内，则必须向事件添加.native,如下所示:

<my-component v-model='value' @focus.native="$event.target.select()"></my-component>

如果觉得对你有用、有帮助，欢迎点赞收藏。