vue 限制input只能輸入正數(shù)的操作
在某些項目中 input 框只能輸入數(shù)字,可以用以下辦法:
先在標簽上綁定上 @input 事件來監(jiān)聽標簽的值變化,通過正則來改變輸入的值。
<input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.replace(/\D+/, ''))" />
第二部封裝個自定義指令放在標簽上!
directives: { numberOnly: { bind: function(el) { el.handler = function() { el.value = Number(el.value.replace(/\D+/, '')) } el.addEventListener('input', el.handler) }, unbind: function(el) { el.removeEventListener('input', el.handler) } } },
接下來就可以去頁面看效果了,只能輸入數(shù)字且只是正數(shù)!
附上 element 的 input 樣式代碼
.keep_input { -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; outline: 0; padding: 0 15px; -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); height: 30px; line-height: 30px; text-align: left; } .keep_input:focus { border-color: #54a6de; outline: 0; }
補充知識:記錄el-input type=number限制長度el-input使用
如下所示:
<el-input type="number" oninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" :max="99999999"> </el-input>
oninput 是個自定義事件 在事件里面獲取輸入的數(shù)字長度,來進行判斷如果大于規(guī)定長度就進行剪切。
keyup.enter.native 是個鍵盤回車事件,當按下Enter鍵時觸發(fā)query()事件。
max為輸入框的最大值,如果input的type=number那么輸入框內是輸入不了字符的。
number框 解決輸入e的問題
主要原因是:e在數(shù)學上代表的是無理數(shù),是一個無限不循環(huán)的小數(shù),其值約為2.7182818284,所以在輸入e的時候,輸入框會把e當成一個數(shù)字看待。
可以采用下面的方式來避免這個BUG,在input標簽中添加如下屬性:
onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”
<el-input placeholder="請輸入密碼" v-model="input" :show-password="true"></el-input>
show-password 加上這個屬性輸入字符進行隱藏一般用于密碼框使用
記錄問題!
以上這篇vue 限制input只能輸入正數(shù)的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關于Vue.js常用指令之循環(huán)使用v-for指令的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-06-06Element-ui/Element-plus?Vue報錯問題及解決
這篇文章主要介紹了Element-ui/Element-plus?Vue報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue中scrollIntoView()方法詳解與實際運用舉例
這篇文章主要給大家介紹了關于Vue中scrollIntoView()方法詳解與實際運用舉例的相關資料,該scrollIntoView()方法將調用它的元素滾動到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關于vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09