js的input框限制输入内容

最新推荐文章于 2024-07-29 12:30:54 发布
转载 最新推荐文章于 2024-07-29 12:30:54 发布 · 904 阅读 · 0

本文介绍如何使用JavaScript控制文本框的输入类型，包括数字、英文、中文等，并提供了具体的实现代码。


想限制输入内容,于是找了这样一个blog,记录一下.




 JS 控制文本框只能输入数字
input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"

JS 控制文本框只能输入数字、小数点
input onkeyup="value=value.replace(/[^\0-9\.]/g,'')"onpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu ="value=value.replace(/[^\0-9\.]/g,'')">

JS 控制文本框只能输入英文
input onkeyup="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 控制文本框只能输入英文、数字
input onkeyup="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 控制文本框只能输入中文
input onkeyup="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 控制文本框只能输入中文、英文、数字、空格
input onkeyup="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="returnfalse;"

用JS写出关于正则表达式的限定输入内容。
m0_53911328的博客
05-06 933
限定输入内容 编写HTML，设置一个年（份）和月（份）的文本框，以及一个查询按钮。 获取操作的元素对象，对表单的提交进行验证。 验证年份， 正则：/^\d{4}$/。验证月份，正则： /^((0?[1-9])|(1[012]))$/ 。 文本框获取焦点，去除提示框的颜色。文本框失去焦点，去除输入内容的两端的空白，并进行验证。 CSS页面代码： <style> .submit{ margin: 5px; } </style&.
JS控制 input 输入字符限制
05-06
包含了常用的验证，包括为空验证，email，身份证，字符，汉字 等等。。
javascript 表单输入内容限制
11-12
里面包括JS的任何表单验证的方法提供齐全 只需黏贴就可以对表单进行验证
JS限制文本框输入内容
System_FLAW的博客
04-10 682
JS判断只能是数字和小数点&lt;转&gt;1.文本框只能输入数字代码(小数点也不能输入)&lt;input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"&gt;2.只能输入数字,能输小数点.&lt;input onkeyup="if(...
js限制输入内容
rhjetjdfgjr的专栏
12-25 670
参考链接：http://wenku.baidu.com/link?url=QoYjnkjTH6RERDF0Xr2zRxx6E7pwrnPVMchyctdpraVran4-37xq4lCWU_XlWjhIBwbto6pkYKTsX05HX7kbGlGKth5-gqo-rV81eaN88_W
使用正则限制input框只能输入数字/英文/中文等等
10-26
通过这些正则表达式，开发者可以根据不同的需求来限制input框的输入内容。需要注意的是，正则表达式的编写需要精确，稍有不慎就会造成错误的匹配结果。同时，由于正则表达式的书写格式较为复杂，开发者应当仔细检查...
js限制input标签中只能输入中文
10-24
本文主要讨论了如何利用JavaScript（js）来限制HTML页面中的`<input>`标签只能输入中文字符。中文字符在Unicode编码范围大致在`\u4E00`到`\u9FA5`之间。为了实现这一功能，我们需要在输入框中添加相应的事件监听器，...
vue:el-input输入时限制输入的类型操作
10-15
比如要限制输入为手机号码，我们可以通过监听el-input的@input事件，在事件回调函数中通过正则表达式来判断是否为合法的手机号码格式。如果输入的内容不符合要求，可以清空该输入框或给出提示。 对于动态创建的字段...
精选资源
js正则限制input只能输入金额
01-08
限制input只能输入金额 JS代码: function checkInput(_this) { if (_this.value != '' && _this.value.substr(0, 1) == '.') { _this.value = '0.00' } if (_this.value == '') { _this.value = '0.00' } _...
精选资源
Angular限制input框输入金额（是小数的话只保留两位小数点）
01-19
需求 输入框要求输入金额，只能输入数字，可以是小数，必须保留小数点后两位。 js判断部分： checkInput: function (event) { var id = event.target.getAttribute(“id”);...//判断输入的内容是不是除了‘-
用js使得输入框input输入限制
junjun199017的专栏
05-18 555
觉得很好用 就收藏了并作了小小的修改 JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) 57) event.returnValue = false;"> 2.只能输入数字,能输小数点. 3.数字和小数点方法二 4.只能输入字母和汉字 5.只能输入英文字母和数字(包括小数点, 斜杠 ),不能输入中文 6.只能输入数字和英文chun
js 显示输入框输入的内容
kk5595的专栏
02-08 1799
JS:<!-- function regInput(obj, reg, inputStr) { var docSel = document.selection.createRange() if (docSel.parentElement().tagName != "INPUT") return false oSel = docSe
js 校验输入框还可以输入多少个字
weixin_33725807的博客
12-14 481
html代码： <textarea class="textarea" maxlength="100" placeholder=" 最多输入100个字！"></textarea> <div>输入剩余<span class="num">100</span>字。</div> 复制代码js代码： //residualFigure函数校...
JS-限制文本框输入内容
06-06 364
 //仅允许输入数字function checkNumber() {    //判断输入字符的keyCode，数字在48到57之间，超出部分返回false    if ((event.keyCode >= 48) && (event.keyCode         event.returnValue = true;    } else {        event.returnValue =
JS 限制input框的输入字数，并提示可输入字数
weixin_30445169的博客
11-29 811
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>限制文件字数字</title> </head> <body> <span class="span">备注信息&lt...
input自定义指令，限制输入数字，字符串，数字，字母等规则
six6de6的博客
07-29 1810
在你的 Vue 组件中，你可以使用这个自定义指令来控制输入框的行为。以下是如何在模板中使用这个指令的详细说明。
在HTML中限制input 输入框的输入类型
c663231的博客
11-21 1369
1.只能输入纯数字 oninput = "value=value.replace(/[^\d]/g,'')"  
input输入框限制输入长度、限制输入内容
热门推荐
weixin_51465537的博客
07-19 1万+
在vue+elemnetUI的前端项目中，使用input输入框进行内容的输入的时候，有的时候会要求限制输入字符长度，有的会限制输入的内容。以下是几个简单的介绍。
input框限制输入长度
最新发布
01-01
### 设置 Input 框的最大输入长度 对于不同类型的 `input` 元素，设置最大输入长度的方法有所不同。 #### 使用 HTML 的 `maxlength` 属性 对于文本类型的输入框 (`<input type="text">`) 和电话号码类型的输入框 (`<input type="tel">`) 可以直接使用 `maxlength` 属性来限制用户的输入长度[^1]： ```html <input type="text" maxlength="5" /> <input type="tel" maxlength="5" /> ``` 然而，当尝试将此属性应用于 `<input type="number">` 类型时，发现该属性不起作用。这是因为浏览器对数字类型有特殊的处理方式，并不支持通过 `maxlength` 来限定其内容的字符数量。 #### 利用 JavaScript 控制输入长度 为了实现对数值类输入框的有效长度控制，可以通过监听事件的方式，在用户每次修改输入值之后立即检查并截断超出部分的内容。下面是一个针对 `<input type="number">` 实现的例子: ```javascript document.querySelector('input[type=number]').addEventListener('input', function (event) { const maxLength = 5; if (this.value.length > maxLength) this.value = this.value.slice(0, maxLength); }); ``` 或者采用内联脚本的形式指定给特定表单控件: ```html <input type="number" oninput="if(this.value.length>5)this.value=this.value.slice(0,5);" /> ``` 这种方法同样适用于其他任何允许自定义验证逻辑的情况。 #### Vue.js 中的应用场景 如果是在Vue项目里开发，则可能更倾向于利用框架特性来做数据绑定和校验工作。例如，可以创建计算属性或watcher监控输入变化，并配合正则表达式过滤非法字符以及保持所需格式的同时达到限长目的[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值