JavaScript限制Input仅输入数字的实现方案

JavaScript限制Input仅输入数字的实现方案

此类功能虽常见，但实际开发中常难以找到完全契合需求的现成代码。鉴于此，本文整理了一套符合特定需求的实现方案，旨在供开发者参考与测试。

核心需求明确：在文本输入框中强制限制仅允许输入数字（含小数点），并确保该功能在 Internet Explorer 和 Firefox 浏览器中均能正常运行。

HTML Input 元素的初始配置如下所示。

 
<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" />

其中，CSS 样式属性 ime-mode:disabled 在 IE 浏览器中生效，用于禁用该输入框内的输入法功能，防止用户直接粘贴或切换输入法输入非数字字符。

onkeyup 事件绑定的是自定义编写的 JavaScript 函数，完整代码见下文。

验证仅允许输入数字的逻辑实现

验证仅允许输入数字的逻辑实现。

 
function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
$(e).val(/^\d+/.exec($(e).val()));
} 
return false;
} 

demo 示例利用正则表达式（Regex）过滤掉所有非数字字符。

支持小数点的正则验证

实际业务中常需验证包含小数点的字段。网络上常见的代码可能允许输入如「1.2.3456」等非法格式，只需微调正则表达式即可修正此问题。

 
function ValidateFloat(e, pnumber){
if (!/^\d+[.]?\d*$/.test(pnumber)){
$(e).val(/^\d+[.]?\d*/.exec($(e).val()));
} 
return false;
} 

此正则表达式允许输入整数或仅包含一个小数点的浮点数。

以上内容供有相关需求的开发者参考使用。

纯 JavaScript 实现版本

针对无需依赖 jQuery 的场景，以下提供纯 JavaScript 实现版本。

HTML 结构需做相应调整。

 
<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber(this,value)" />

纯 JavaScript 实现仅输入数字的功能。

 
function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
e.value = /^\d+/.exec(e.value);}
return false;
} 

纯 JavaScript 实现支持输入小数。

 
function ValidateNumber(e, pnumber)
{ 
if (!/^\d+[.]?\d*$/.test(pnumber))
{ 
e.value = /^\d+[.]?\d*/.exec(e.value);
} 
return false;
} 

限制小数位数的处理

针对需限制小数点后仅保留一位数字的需求，仅需调整正则表达式即可实现。

 
function ValidateFloat2(e, pnumber)
{ 
if (!/^\d+[.]?[1-9]?$/.test(pnumber))
{ 
e.value = /\d+[.]?[1-9]?/.exec(e.value);
} 
return false;
} 

IE浏览器空值处理优化

在 IE 浏览器中，若初始输入非数字字符，直接执行正则匹配可能返回 null。因此需增加空值判断逻辑以过滤无效输入。

 
if (!/^\d+$/.test(pnumber))
{ 
var newValue = /^\d+/.exec(e.value);
if (newValue != null)
{ 
e.value = newValue;
} 
else
{ 
e.value = "";
} 
} 
return false;