javascript - vue 移動端的input 數字輸入優化
問題描述
這是移動端使用的, input type 為number 時 英文或中文都沒有限制,而且maxlength不起作用,input type 為tel 時 英文或中文也都沒有限制,但maxlength有作用,所以用tel,keyup 是為了過濾數字以外的字符。請問大神這段代碼還有沒有優化的空間?
<input v-model='phoneNumber' placeholder='輸入手機號' type='tel' maxlength='11' @keyup='handleFilterLetters'><script type='text/javascript'> vm = new Vue({ el: '#app', data: {phoneNumber: null, }, methods: {handleFilterLetters: function(){ var self = this; self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);}, }})</script>
問題解答
回答1:phoneNumber 初始值應該是字符串的 ’’,否則對一個可能為 null 的變量調用 replace 是不安全的。
var self = this 是不必要的。
handleFilterLetters 好長啊,改成 onKeyUp 不好讀一點嗎(
<input> 一行寫的太長了,eslint-airbnb 的規則是
<input v-model='phoneNumber' placeholder='輸入手機號' type='tel' maxlength='11' @keyup='handleFilterLetters'/>回答2:
樓上說的都對題主還可以多注意一下 code style 比如:self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);
寫成self.phoneNumber = self.phoneNumber.replace(/[^d]/g,’’);
比較好
回答3:這里用的局部filter
如果想可復用程度高點,全局filter也可以的
<p > <input :value='phone | num' @keyup='phoneChange' /></p>
var app = new Vue({ el: '#app', data: { phone: '' }, methods: { phoneChange(e) { this.phone = e.target.value this.$forceUpdate() // 這里必須有 } }, filters: { ’num’: function(value) { return value.replace(/[^d]/g, ’’) } }})
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?4. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化5. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~6. javascript - nodejs關于進程間發送句柄的一點疑問7. 配置Apache時,添加對PHP的支持時語法錯誤8. 實現bing搜索工具urlAPI提交9. phpstudy8.1支持win11系統嗎?10. javascript - 移動端上不能實現拖拽布局嗎?

網公網安備