input 输入框只能输入纯数字

最新推荐文章于 2023-04-06 18:34:34 发布
转载 最新推荐文章于 2023-04-06 18:34:34 发布 · 192 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/justSmile2/p/10208612.html
文章标签：

#javascript #ViewUI

本文探讨了在HTML输入框中仅允许输入数字的方法，对比了onkeyup、onchange及oninput事件的效果，推荐使用oninput事件实时限制非数字输入，确保输入内容的准确性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母

 

2、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应

 

3.oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件，完美的解决了以上两种问题

 

推荐：

<input oninput = "value=value.replace(/[^\d]/g,'')" >
<input type="text" oninput = "value=value.replace(/[^0-9.]/g,'')" />

转载于:https://www.cnblogs.com/justSmile2/p/10208612.html

react-numeric-input：用于React的数字输入组件
02-23
React数字输入 数字输入组件可以替换尚不十分支持的本地数字输入，并且它在各个位置上在各个浏览器中的外观也不相同。 此外，此组件提供了更灵活的选项，可用于任何值（内部数字值的不同格式表示形式）。 安装 npm install react-numeric-input --save 然后在您的脚本中： // es6 import NumericInput from 'react-numeric-input' ; // or es5 var NumericInput = require ( 'react-numeric-input' ) ; // or TypeScript import * as NumericInput from "react-numeric-input" ; 用法 最少使用量： 这将与<input type="number">完全一样。 它将创建一个空的数字输入，
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
10-19
在AngularJS中，对input输入框进行限制，使其只能输入数字和小数点是一项常见的需求。这种需求通常用于财务或数量输入的场景，其中输入的格式要严格按照数字和小数点的要求来。本文将介绍一种推荐的AngularJS实现...
在HTML中限制input 输入框只能输入纯数字
进阶之旅
06-04 610
限制 input 输入框只能输入纯数字 1、onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母 2、onchange = "value=value.replace(/[^\d]/g,'')" 使用 onchange 事件，在输入内容后，只有 inpu...
input输入框只能输入纯数字或小数点后几位
Xue_BT的博客
03-10 1129
input的输入框限制输入内容为纯数字，不含任何符号(包括负号)。或者精确到小数点后几位数字
如何在HTML中限制input 输入框只能输入纯数字
热门推荐
冯磊
02-27 26万+
在输入框输入任何非数字内容，都会自动退格并清除！ 核心代码: onKeyUp=”value=value.replace(/[^\d]/g,”)” 示例代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;U
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
12-13
第一： 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数')...'只能输入数字，小数点后只能保留两位');this.v
js限制输入框只能输入数字(onkeyup触发)
10-17
### 知识点：使用JavaScript限制输入框只能输入数字 #### 概述 本文介绍了如何利用JavaScript实现仅允许用户在输入框中输入数字的功能。这一需求在各种基于Web的表单验证中非常常见，例如在填写电话号码、身份证...
绑定输入框只能输入数字
Fiona的专栏
10-18 1480
input输入框绑定事件       function telBind(){ $("#dome").bind({ click : function(){ var dome= $('#dome').val(); if('手机号' == dome){ $('#dome').val(''); $('#dome').focus();
input输入框限制只能输入数字的方法
qq_32450471的博客
02-28 1万+
input输入框限制只能输入数字的方法
文本框中只能输入文字不能输入数字
01-22
此页面是为了让输入框中不能输入数字,代码是js写的。
js完美解决jsp文本框限制只能输入数字、小数问题
11-27
js完美解决jsp文本框限制只能输入数字、小数问题，只需 oncontextmenu="return false;" oncontextmenu="return false;":防止右键粘贴
原生input控制只能输入数字
zhangyuexin24的博客
08-26 556
只能输入11位数字（不能输入其他值） <input type="text" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11);value=value.replace(/[^0-9]/g,'')" />
在input中实现输入纯数字（带小数点）
u013163860的专栏
12-11 8215
今天再做表单时遇到一个问题：就是如何在input标签里实现只能输入数字，若输入字母或者汉字时会有提示信息,查阅网上的很多资料，只找到了阻止输入英文字母的代码，所以下午的研究了一下怎么实现只输入数字！ 以下为原生js的代码： html：     只能输入数字的input     请输入数字：         js： var txt = document.getElementB
input标签 设置纯数字输入
Lv骚年
09-26 9813
input标签 设置纯手机号输入（键盘输入或粘贴时自动去除非数字字符） 解决方案： <input type="tel" placeholder="请输入11位手机号码" oninput="value=value.replace(/[^\d]/g,'');if(val...
input 设置只能输入纯数字
weixin_51828648的博客
04-06 1141
完成后，输入框限制仅可输入数字，字母e和小数点均可输入（e为科学计数法）设置input 的type属性为number,在样式中设置如下代码。
关于element-ui的输入框限制只能输入数字的问题
weixin_45021068的博客
01-14 2万+
关于element-ui的输入框限制只能输入数字的问题 这个问题我使用过很多办法,每一种都去尝试，但是结果都不太理想 比如以下的几种方法 注：我要的效果是，输入框内只可输入数字，除了数字其他什么都不可输入，包括标点符号，英文在内 第一种、使用el-input自带原生的 type=“number” 他存在着两个问题 首先，type="number"允许输入e 其次，maxlength属性也不生效 第二种、使用oninput <el-input v-model='width' onin
使 html input 标签只能输入数字
无聊哇，随便搞搞
11-21 1839
其中，使用了JS技术，此时，input 框只接受数字键，其他按键均不起作用 function IsNum(ev) { var k = window.event ? ev.keyCode : ev.which; if (((k >= 48) && (k <= 57)) || k === 8 || k === 0) { } else {
【 javascript】＜input＞ 实现输入框只能输入数字（个人认为最好的）
weixin_55846296的博客
08-11 3万+
form表单实现限制输入框只能输入数字（多个方案供大家选择）
input输入框只能输入数字及小数
最新发布
06-11
### 限制HTML input输入框仅接受数字和小数点的实现方法 在实际开发中，可以通过正则表达式结合JavaScript来实现对HTML `input` 输入框的限制，确保用户只能输入数字和小数点，并且可以进一步控制小数点的数量以及小数位数。以下是几种常见的实现方式： #### 方法一：使用 `oninput` 属性结合正则表达式 通过在HTML中直接定义 `oninput` 属性，实时对用户输入的内容进行过滤。 ```html <input type="text" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" maxlength="16" /> ``` 上述代码实现了以下功能[^1]： - 只允许输入数字和小数点。 - 小数点后最多保留两位小数。 - 防止用户输入非法字符。 #### 方法二：结合 JavaScript 进行输入校验 如果需要更复杂的逻辑处理，可以使用JavaScript编写校验函数。 ```html <input type="text" id="numberInput" /> <script> document.getElementById('numberInput').addEventListener('input', function (e) { let value = e.target.value; // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } e.target.value = value; }); </script> ``` 该方法实现了以下功能[^2]： - 清除所有非数字和小数点的字符。 - 确保输入框中只有一个小数点。 - 限制小数点后最多两位小数。 #### 方法三：使用 Vue.js 的 `v-model` 和 `@input` 事件 在Vue.js项目中，可以通过 `v-model` 和 `@input` 事件来实现类似的功能。 ```vue <template> <el-input v-model.trim="form.testA" maxlength="16" @input="handleInput" /> </template> <script> export default { data() { return { form: { testA: '' } }; }, methods: { handleInput(value) { // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } this.form.testA = value; } } }; </script> ``` 此方法适用于Vue.js框架下的场景[^3]，并且能够实现与方法二相同的功能。 #### 方法四：纯 JavaScript 实现输入框校验 对于需要独立于框架的场景，可以使用纯JavaScript实现输入框的校验逻辑。 ```html <input type="text" id="customNum" /> <script> const customNum = document.getElementById('customNum'); customNum.addEventListener('input', function () { let value = this.value; // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } this.value = value; }); </script> ``` 此方法同样能够满足限制输入框仅接受数字和小数点的需求[^4]。 --- ### 总结 以上四种方法分别适用于不同的场景，开发者可以根据具体需求选择合适的实现方式。无论是通过HTML属性、JavaScript函数还是Vue.js框架，都可以有效地限制输入框的输入内容为数字和小数点，并进一步控制小数点的数量和小数位数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值