JavaScript 限制输入内容的多种实现方案
本文汇总了JavaScript中限制文本框输入内容的多种实用代码方案。涵盖仅允许输入汉字、纯数字、数字与小数点、数字与冒号、字母与等号,以及复杂的IP地址分段输入验证。通过onkeyup、onbeforepaste及自定义函数等事件处理,结合正则表达式实现前端输入过滤,提升用户体验与数据规范性。
限制输入汉字与数字的基础实现
代码示例如下:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"> 2.限制仅输入数字
代码示例如下:
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 简易禁止输入汉字的方法
简单禁止输入汉字的方法
代码示例如下:
<input type="text" style="ime-mode:disabled"> 允许输入数字和小数点
允许输入数字及小数点:
代码示例如下:
onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" 限制输入数字和冒号(如时间格式)
javascript 仅允许输入数字和冒号":".2007-11-24 15:50<input type=text id="aa1" onkeyup="this.value=this.value.replace(/[^\d&:]/g,'')" onblur="this.value=this.value.replace(/[^\d&:]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d&:]/g,'')"/>
仅允许数字和冒号,例如用于输入时间场景。
限制输入字母和等号
代码示例如下:
<input type=text id="aa" onkeyup="value=value.replace(/[^\w&=]|_/ig,'')" onblur="value=value.replace(/[^\w&=]|_/ig,'')" /> 仅允许输入字母和等号,禁止汉字。
其他相关内容:
其他数字输入限制方案
限制仅输入数字的JavaScript脚本
代码示例如下:
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 前半句限制键盘输入为数字,后半句限制粘贴内容为数字
代码示例如下:
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"> 3.JavaScript限制仅输入数字和英文
自定义函数验证会员代号与密码
代码示例如下:
function isregname( checkobj)
{
var checkOK = "0123456789-_abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var checkStr = checkobj;
var allValid = true;
var decPoints = 0;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
return (allValid)
}
----------------
if(!(isregname(obj.loginname.value))){
alert("[会员代号]不符合规范,会员代号只能是英文字母或数字");
obj.loginname.focus();
return(false);
}
if(!(isregname(obj.password.value))){
alert("[密码]不符合规范,密码只能是英文字母或数字");
obj.password.focus();
return(false);
} 4.javascript限制仅输入英文和数字的输入框
过滤非数字字符的输入框
代码示例如下:
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 5.可用Javascript检查文本框,过滤非0-9字符
基于按键码的数字输入控制
代码示例如下:
<script language="javascript" event="onkeydown" for="document">
if(event.srcElement.name=='TextBox1')
{
if(!KeyIsNumber(event.keyCode))
{
return false;//此句最为关键
}
}
</script>
<script language="javascript">
function KeyIsNumber(KeyCode)
{
//若输入字符在0-9之间,或为backspace、DEL键
if(((KeyCode>47)&&(KeyCode<58))||(KeyCode==8)||(KeyCode==46))
{
return true;
}
else
{
return false;
}
}
</script>[url=http://blog.csdn.net/xujh/admin/EditPosts.aspx][/url] 6.限制文本框仅输入IP地址格式
IP地址分段输入框的实现
代码示例如下:
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
.a3{width:30;border:0;text-align:center}
</style>
<script>
function mask(obj){
obj.value=obj.value.replace(/[^\d]/g,'')
key1=event.keyCode
if (key1==37 || key1==39)
{ obj.blur();
nextip=parseInt(obj.name.substr(2,1))
nextip=key1==37?nextip-1:nextip+1;
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval("ip"+nextip+".focus()")
}
if(obj.value.length>=3)
if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0)
{
alert(parseInt(obj.value)+"IP地址错误!")
obj.value=""
obj.focus()
return false;
}
else
{ obj.blur();
nextip=parseInt(obj.name.substr(2,1))+1
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval("ip"+nextip+".focus()")
}
}
function mask_c(obj)
{
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))
}
</script>
<title>IP地址输入</title>
</head>
<body>IP地址输入
<div style="border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt">
<input type=text name=ip1 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip2 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip3 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip4 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>
</div>
</body>
</HTML>JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
