本文介绍如何利用 JavaScript 和正则表达式限制文本框的输入内容。通过监听 onkeypress、onkeyup 及 onpaste 等事件,分别实现禁止输入英文、仅允许中文、全角字符、纯数字以及数字与英文组合的多种输入限制逻辑,并提供对应的 HTML 代码示例供参考。
JavaScript 限制输入内容实现方案
本教程介绍如何使用 JavaScript 限制文本框的输入内容,具体包括限制仅能输入英文或仅能输入中文的场景。
首先介绍如何禁止输入英文字符。
具体实现代码如下:
<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" onpaste="return !clipboardData.getData('text').match(/\D/)" ondragenter="return false">
限制仅输入中文
其次,介绍如何使用正则表达式限制只能输入中文字符。
具体实现代码如下:
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" />
限制仅输入全角字符
此外,还可以使用正则表达式限制只能输入全角字符。
具体实现代码如下:
<input type="text" onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" />
限制仅输入数字
另一种常见需求是使用正则表达式限制只能输入纯数字。
具体实现代码如下:
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
限制输入数字和英文
最后,介绍如何使用正则表达式限制只能输入数字和英文字符的组合。
具体实现代码如下:
<input type="text" onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />