当前位置:网站首页>Input can only input numbers, limited input
Input can only input numbers, limited input
2022-07-06 16:14:00 【Dream height 1.8 meters】
string.replace(/[^\d]/g, '')
, Replace non numeric characters in the string with empty characters/[^\d]/g
It's a regular expression , Match non numeric characters globally
1 onkeyup event
<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=" Please enter " onKeyUp={
e => e.target.value = e.target.value.replace(/[^\d]/g, '')} /> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
If you put onkeyup Switch to onkeydown or onkeypress, It doesn't work , although onkeyup The effect of is not very good
2 onchange coordination value
onkeyup The essence of the event is to change when the keyboard is released input Internal value , The direct use onchange and value Not on it .
<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=" Please enter " value={
number} onChange={
e => setNumber(e.target.value.replace(/[^\d]/g, ''))} /> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
You may not see it on the moving picture , Actually, I'm typing ’2’ Then press the letter key crazily
3 Restrict input rules ( Regular expression )
You can only enter Numbers string.replace(/[\D]/g, ''))
You can only enter Numbers 、 english string.replace(/[^A-Za-z0-9]/g, ''))
You can only enter Numbers 、 english 、 Down slash string.replace(/[\W]/g, ''))
You can only enter Numbers 、 decimal point ( It's not a decimal , There can be multiple decimal points )string.replace(/[^0-9.]/g, ''))
边栏推荐
- 第 300 场周赛 - 力扣(LeetCode)
- Shell Scripting
- Configuration du cadre flask loguru log Library
- [exercise-7] (UVA 10976) fractions again?! (fraction split)
- The concept of C language array
- Advancedinstaller安装包自定义操作打开文件
- Suffix expression (greed + thinking)
- Information security - threat detection - detailed design of NAT log access threat detection platform
- 滲透測試 ( 1 ) --- 必備 工具、導航
- Write web games in C language
猜你喜欢
Flask框架配置loguru日志庫
QT实现窗口渐变消失QPropertyAnimation+进度条
1529. Minimum number of suffix flips
浏览器打印边距,默认/无边距,占满1页A4
Penetration test 2 --- XSS, CSRF, file upload, file inclusion, deserialization vulnerability
[analysis of teacher Gao's software needs] collection of exercises and answers for level 20 cloud class
快速转 TypeScript 指南
Advancedinstaller安装包自定义操作打开文件
Luogu P1102 A-B number pair (dichotomy, map, double pointer)
树莓派4B安装opencv3.4.0
随机推荐
X-forwarded-for details, how to get the client IP
Vs2019 initial use
1323. Maximum number of 6 and 9
Opencv learning log 24 -- Hough transform 2 (maximum interval and minimum length can be limited)
7-1 understand everything (20 points)
Advancedinstaller安装包自定义操作打开文件
第 300 场周赛 - 力扣(LeetCode)
Some problems encountered in installing pytorch in windows11 CONDA
C language must memorize code Encyclopedia
C language is the watershed between low-level and high-level
Common configuration files of SSM framework
力扣——第298场周赛
Understand what is a programming language in a popular way
Socket communication
[exercise-2] (UVA 712) s-trees
The concept of C language array
[exercise-6] (PTA) divide and conquer
Problem - 1646C. Factorials and Powers of Two - Codeforces
QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
Penetration test (8) -- official document of burp Suite Pro