本文介绍如何利用JavaScript的正则表达式与onkeyup、onpaste及oncontextmenu事件,限制HTML文本框的输入内容。通过替换非法字符,可实现仅允许数字、小数点、英文、中文或特定组合符号的输入,并支持禁用右键菜单和粘贴功能,确保数据格式符合预设要求。
JS限制文本框输入内容的实现方法
使用JS限制文本框仅允许输入数字。
<input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')">
使用JS限制文本框仅允许输入数字及小数点。
<inputonkeyup="value=value.replace(/[^\0-9\.]/g,'')"onpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu ="value=value.replace(/[^\0-9\.]/g,'')">
使用JS限制文本框仅允许输入英文字母。
<inputonkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z]/g,'')">
使用JS限制文本框仅允许输入英文字母与数字。
<inputonkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
使用JS限制文本框仅允许输入中文字符。
<inputonkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
使用JS限制文本框仅允许输入中文、英文及数字。
<inputonkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">
使用JS限制文本框仅允许输入中文、英文、数字及空格。
<inputonkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')">
使用JS限制文本框仅允许输入中文、英文、数字及小数点。
<inputonkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">
通用配置规则与高级限制
总结实现原理如下:
首先在<input>标签中嵌入以下属性代码:
onkeyup="value=value.replace(/[^\X]/g,'')"
随后将正则表达式(/[\X]/g,'')中的\X替换为所需的字符编码即可。
常用字符编码包括:中文范围u4E00-u9FA5,数字0-9,英文a-z\A-Z,以及其他指定符号如@、点号等。
若需同时允许多种字符,只需使用反斜杠\进行分隔即可。
例如,若需同时允许中英文、数字、@符号及点号,可配置为\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.
若要在文本框中禁用右键菜单及粘贴操作
需在'<input>'标签中添加onpaste="return false" oncontextmenu="return false;"属性
上述关于js控制文本框仅允许输入中文、英文、数字及指定特殊符号的实现代码即为小编分享的全部内容,旨在提供参考,并感谢大家的支持。