当前位置:网站首页>input 只能输入数字,限定输入
input 只能输入数字,限定输入
2022-07-06 09:28:00 【梦想身高1米8】
string.replace(/[^\d]/g, '')
,把字符串内非数字的字符替换成空字符/[^\d]/g
是正则表达式,全局匹配非数字字符
1 onkeyup事件
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
return <input placeholder="请输入" onKeyUp={
e => e.target.value = e.target.value.replace(/[^\d]/g, '')} /> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
如果把onkeyup换成onkeydown或onkeypress,是达不到效果的,虽然onkeyup的效果也不是很好
2 onchange配合value
onkeyup事件本质上就是在键盘松开的时候改变input内的值,那直接用onchange和value不就可以了。
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
const [number, setNumber] = React.useState() return <input placeholder="请输入" value={
number} onChange={
e => setNumber(e.target.value.replace(/[^\d]/g, ''))} /> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
动图上可能看不出来,其实我在输入’2’之后疯狂摁字母键
3 限定输入规则(正则表达)
只能输入数字string.replace(/[\D]/g, ''))
只能输入数字、英文string.replace(/[^A-Za-z0-9]/g, ''))
只能输入数字、英文、下斜杠string.replace(/[\W]/g, ''))
只能输入数字、小数点(不是小数,可以有多个小数点)string.replace(/[^0-9.]/g, ''))
边栏推荐
- QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
- AcWing:第58场周赛
- The "sneaky" new asteroid will pass the earth safely this week: how to watch it
- Quick to typescript Guide
- 图图的学习笔记-进程
- 1605. Sum the feasible matrix for a given row and column
- 快速转 TypeScript 指南
- Auto.js入门
- [analysis of teacher Gao's software needs] collection of exercises and answers for level 20 cloud class
- 渗透测试 ( 2 ) --- 渗透测试系统、靶机、GoogleHacking、kali工具
猜你喜欢
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
860. Lemonade change
Configuration du cadre flask loguru log Library
Advancedinstaller安装包自定义操作打开文件
Radar equipment (greedy)
605. Planting flowers
Information security - threat detection engine - common rule engine base performance comparison
渗透测试 ( 8 ) --- Burp Suite Pro 官方文档
969. Pancake sorting
[exercise-4] (UVA 11988) broken keyboard = = (linked list)
随机推荐
[exercise-2] (UVA 712) s-trees
Maximum product (greedy)
MySQL import database error [err] 1273 - unknown collation: 'utf8mb4_ 0900_ ai_ ci’
[exercise-7] crossover answers
window11 conda安装pytorch过程中遇到的一些问题
Sword finger offer II 019 Delete at most one character to get a palindrome
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
[exercise-7] (UVA 10976) fractions again?! (fraction split)
E. Breaking the Wall
D - function (HDU - 6546) girls' competition
(POJ - 3579) median (two points)
[analysis of teacher Gao's software needs] collection of exercises and answers for level 20 cloud class
New to redis
TCP's three handshakes and four waves
Information security - security professional name | CVE | rce | POC | Vul | 0day
Differential (one-dimensional, two-dimensional, three-dimensional) Blue Bridge Cup three body attack
[exercise-1] (UVA 673) parentheses balance/ balanced brackets (stack)
C language must memorize code Encyclopedia
QT按钮点击切换QLineEdit焦点(含代码)
【练习-4】(Uva 11988)Broken Keyboard(破损的键盘) ==(链表)