[email protected]">

当前位置：网站首页>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, ''))

原网站

版权声明
本文为[梦想身高1米8]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43915401/article/details/125087741

边栏推荐

猜你喜欢

随机推荐