input 只能输入数字,限定输入

Posted 梦想身高1米8

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input 只能输入数字,限定输入相关的知识,希望对你有一定的参考价值。

string.replace(/[^\\d]/g, ''),把字符串内非数字的字符替换成空字符
/[^\\d]/g是正则表达式,全局匹配非数字字符

1 onkeyup事件

<html>

<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/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/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/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, ''))

以上是关于input 只能输入数字,限定输入的主要内容,如果未能解决你的问题,请参考以下文章

input文本输入框限定输入数据类型

使用replace限定只能输入数字,最多有两位小数

如何限定TEDIT只能输入数字或汉字或字母

excel vba 将一个文本框TEXTBOX1限定只能输入数字,如果输入其他汉字或者字母提示,输入错误,请输入数字

INPUT只能输入数字

input输入框只能输入数字,只能输入字母数字组合