vue 限制input只能輸入正數(shù)的操作
在某些項(xiàng)目中 input 框只能輸入數(shù)字,可以用以下辦法:
先在標(biāo)簽上綁定上 @input 事件來監(jiān)聽標(biāo)簽的值變化,通過正則來改變輸入的值。
<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+/, ''))" />
第二部封裝個(gè)自定義指令放在標(biāo)簽上!
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; }
補(bǔ)充知識(shí):記錄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 是個(gè)自定義事件 在事件里面獲取輸入的數(shù)字長度,來進(jìn)行判斷如果大于規(guī)定長度就進(jìn)行剪切。
keyup.enter.native 是個(gè)鍵盤回車事件,當(dāng)按下Enter鍵時(shí)觸發(fā)query()事件。
max為輸入框的最大值,如果input的type=number那么輸入框內(nèi)是輸入不了字符的。
number框 解決輸入e的問題
主要原因是:e在數(shù)學(xué)上代表的是無理數(shù),是一個(gè)無限不循環(huán)的小數(shù),其值約為2.7182818284,所以在輸入e的時(shí)候,輸入框會(huì)把e當(dāng)成一個(gè)數(shù)字看待。
可以采用下面的方式來避免這個(gè)BUG,在input標(biāo)簽中添加如下屬性:
onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”
<el-input placeholder="請輸入密碼" v-model="input" :show-password="true"></el-input>
show-password 加上這個(gè)屬性輸入字符進(jìn)行隱藏一般用于密碼框使用
記錄問題!
以上這篇vue 限制input只能輸入正數(shù)的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- input輸入框限制只能輸入數(shù)字的方法實(shí)例(個(gè)人認(rèn)為最好的)
- Elementui如何限制el-input框輸入小數(shù)點(diǎn)
- vue:el-input輸入時(shí)限制輸入的類型操作
- Angular限制input框輸入金額(是小數(shù)的話只保留兩位小數(shù)點(diǎn))
- 怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
- JS通過正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
- 使用正則限制input框只能輸入數(shù)字/英文/中文等等
- JS限制input框只能輸入0~100的正整數(shù)的兩種方法
相關(guān)文章
在Vue3中生成動(dòng)態(tài)的word文檔的示例代碼
這篇文章主要介紹了如何在 Vue 3 中生成動(dòng)態(tài)的 Word 文檔,在開發(fā)過程中遇到一個(gè)需求,動(dòng)態(tài)生成一個(gè)word報(bào)表,當(dāng)時(shí)考慮了是前端做還是后端做的問題,最后發(fā)現(xiàn)兩個(gè)解決需求的方法都大差不差,但考慮到前端少發(fā)一個(gè)請求,就此使用的前端來解決,需要的朋友可以參考下2024-09-09Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06vue實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來看看vue-codemirror的具體使用吧2024-02-02