当前位置:网站首页>El input limit can only input numbers
El input limit can only input numbers
2022-06-30 08:26:00 【_ Baby grut】
el-input Limit can only enter numbers
Method 1 :
By setting type attribute :type="number"
<el-input
maxlength="11"
type="number"
v-model="ruleForm.phone"
placeholder=" Please enter contact information "
show-word-limit
></el-input>
But this approach usually affects the style , Not recommended , Pictured :
Method 2 :
By binding value constraints :v-model.number="ruleForm.phone"
But this method will limit the general number , But it will affect maxlength attribute , also e It can be entered , In general, you can use , Strictly limited words are not recommended
Method 3 :
It is recommended to use
By binding value Value for regular restriction :οnkeyup="value=value.replace(/[^\d]/g, ' ')"
Bind one onkeyup Monitoring events , /[^\d]/g Is a regular expression that matches all non numeric content , Replace it with an empty string , This approach does not affect any properties
<el-input
maxlength="11"
v-model="ruleForm.phone"
placeholder=" Please enter contact information "
show-word-limit
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
边栏推荐
- [tensorflow GPU] building of deep learning environment under windows11
- [notes] polygon mesh processing learning notes (10)
- F12 packet capture is used for the whole process analysis of postman interface test
- [JUC series] overview of fork/join framework
- php api获取二维码、组合生成图片
- Experiment 4 QT
- Wsl2 using GPU for deep learning
- Unity简单shader
- 增强for循环的增删操作 & 迭代器删除集合元素
- Game 280 problem2: minimum operands to turn an array into an alternating array
猜你喜欢
[flower carving experience] 14 line blank board pingpong library test external sensor module (one)
Gilbert Strang's course notes on linear algebra - Lesson 1
一次cpu 跌底排查
Gilbert Strang's course notes on linear algebra - Lesson 4
2021-05-06
More, faster, better and cheaper. Here comes the fastdeploy beta of the low threshold AI deployment tool!
Sword finger offer II 074 Merge interval (sort, array)
Axure制作菜单栏效果
Enhance the add / delete operation of for loop & iterator delete collection elements
Acreems energy efficiency management platform escorts the power safety of high-rise residential areas
随机推荐
Is it difficult to jump job ByteDance? With these skills, you can easily pass
MySQL quotation sentence is unlocked: algorithm=insert, lock=none
Dlib library blink
Enter the URL in the browser and display it on the page
C preliminary chapter learning route
Introduction to opencv (I): image reading and display
【NVMe2.0b 14-3】Doorbell Buffer Config command、Device Self-test command
Development technology sharing of Jingtan NFT digital collection system
Unity simple shader
[untitled]
【NVMe2.0b 14-5】Firmware Download/Commit command
牛客小白月赛52
[notes] polygon mesh processing learning notes (10)
codeforces每日5题(均1700)-第三天
【NVMe2.0b 14-6】Format NVM、Keep Alive、Lockdown command
[flower carving experience] 13 build the platformio ide development environment of esp32c3
【NVMe2.0b 14-2】Create/Delete Queue
Cesium learning notes (II) uploading data using rest API
小程序使用二维码插件
Does the oscilloscope probe affect the measurement of capacitive load?