本文主要讲解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>
如果觉得对你有用、有帮助，欢迎点赞收藏。
