本文主要講解input常見使用以及使用過程中遇到的問題伤哺。
1. input輸入框禁止顯示歷史記錄
在輸入input時會顯示原來輸入的內(nèi)容，禁止這種情況只需要在input加入:
autocomplete="off"
2. input失去焦點監(jiān)聽以及按回車鍵失去焦點處理
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()">
請記住，如果您的輸入位于組件內(nèi)瘤旨，則必須向事件添加.native,如下所示:
<my-component v-model='value' @focus.native="$event.target.select()"></my-component>
如果覺得對你有用陶夜、有幫助，歡迎點贊收藏裆站。
