快捷導(dǎo)航

vue 限制input只能輸入正數(shù)的操作

更新時(shí)間：2020年08月05日 10:02:52 作者：你眼中的柔情

這篇文章主要介紹了vue 限制input只能輸入正數(shù)的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

在某些項(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue如何解決空格和空行報(bào)錯(cuò)的問題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
在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-09
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
vue input輸入框模糊查詢的示例代碼
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
vue實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下
2023-12-12
Vue3中使用vuex4的實(shí)現(xiàn)示例
本文主要介紹了Vue3中使用vuex4的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue項(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-09
vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來看看vue-codemirror的具體使用吧
2024-02-02