問題描述

當我們開發項目時，常常想限制用戶只能輸入純數字:

官方文檔

https://element.eleme.cn/#/zh-CN/component/input

https://element.eleme.cn/#/zh-CN/component/input-number?

解決方案

方法一：el-input + 正則表達式

只需要在el-input標簽添加代碼,如下圖所示:

代碼如下圖

<el-form-item label="角色Id*" class="redItem"><el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="請輸入數字"></el-form-item>

可以通過給input 添加onkeyup事件來實現

當輸入值的鍵盤抬起時觸發這個事件。this.value表示此輸入框的值，/\D/g為正則表達式，用來匹配所有非數字字符；

此句功能為：將輸入值為非數字的字符替換為空；

placeholder屬性是當input框為空時顯示的文字提示;

方法二：el-input-number

<el-input-numbersize="mini"style="width: 130px"v-model="user.coin":controls="false"placeholder="請輸入硬幣數量"></el-input-number>

僅允許輸入標準的數字值，可定義范圍?

注：不能帶 icon?

參考文章

https://www.jianshu.com/p/37ff53584c41

https://juejin.im/post/5ce77ebcf265da1b9612de0a

總結

以上是生活随笔為你收集整理的Element UI——数字输入框解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。