input 输入框过滤输入文本

最新推荐文章于 2023-10-07 09:47:50 发布
最新推荐文章于 2023-10-07 09:47:50 发布
阅读量3.6k 收藏 10
点赞数 3
分类专栏： js 文章标签： js input onkeyup
本文详细介绍了如何使用JavaScript控制文本框的输入类型，包括仅限数字、字母、中文、特殊字符等，提供了实用的代码示例，适用于网页表单的数据验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

特殊字符：

onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5\w]/g,'')"

只能输入数字：

onkeyup="value=value.replace(/[^\d]/g,'') " 

只能输入数字和字母：

onkeyup="value=value.replace(/[\W]/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(/[^\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 控制文本框只能输入中文、英文、数字
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 控制文本框只能输入中文、英文、数字、空格
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 控制文本框只能输入中文、英文、数字、小数点
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,'')">


总而言之:先在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\@\.

例如：中英文 + 数字 +常用的标点符号

 onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$]/g,'')"


若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话
就要在input里输入 onpaste="return false" oncontextmenu="return false;"
 

输入框过滤输入（基于antd design input 和 ts 和 vue-property-decorator 封装组件）
xuan的博客
11-26 856
一、说明 此例子基于antd design input 和 ts 和 vue-property-decorator 封装组件。 一、定义一个prop 用于接收需要过滤的值，它可以是XInputTransformEnum枚举中的值（比较常用的），也可以是一个正则或一个函数，亦或者是所有这些可能值组成的一个数组。 @Prop() transform?: XInputTransform | XInputTransform[]; 二、类型定义 export enum XInputTransformE
鸿蒙OpenHarmony【TextInput】ArkTS文本与输入
asfn123123的博客
11-08 1767
单行文本输入框组件。
过滤TextBox输入框
zhaoguiqun的专栏
07-15 1092
    在工作中遇到一个问题，在查询的时候，用户在textbox中随机输入，如果输入了特殊字符，必然“’”，就会引起错误，其实原因很简单，这里的单引号在进行数据库操作的时候，和数据库语句或者存储过程中的发生了冲突，所以要进行输入的过滤，这里只允许输入数字和字母。过滤如下：先写一个实现过滤的类，在初始化的时候传入控件的引用。如下：namespace Common{    public class FilterTextBox    {        private TextBox textbox;       
input类型过滤
看风听雨
04-19 2024
1.input对非数字进行过滤 &lt;input type="text" value="" name="amount" placeholder="充值金额" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')&quo
AS3学习笔记（2）
自由空间
10-31 1262
TextField.restrict = "此处为可输入的内容";field.restrict = "^此处为禁止输入的内容";restrict属性支持一些类似正则表达式的样式:field.restrict = "a-zA-z"; //只允许大小字母field.restrict = "a-zA-z "; //只允许字母和空格field.restrict = "0-9"; //只允许数字field.
Input过滤输入（摘自《JavaScript高级程序设计（第3版）》）
weixin_33989780的博客
11-02 125
我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。例如，必须包含某些字符，或者必须匹配某种模式。由于文本框在默认情况下没有提供多少验证数据的手段，因此必须使用JavaScript 来完成此类过滤输入的操作。而综合运用事件和 DOM 手段，就可以将普通的文本框转换成能够理解用户输入数据的功能型控件。 下列代码只允许用户输入数值： 1 EventUtil.addHand...
jquery实现input输入框实时输入触发事件代码
12-04
在本例中，我们探讨的是如何使用 jQuery 来实现在输入框(input)中实时输入时触发特定事件的功能。这对于构建动态交互的用户界面，如搜索建议、实时验证或数据过滤等场景非常有用。 首先，让我们分析提供的代码： 1...
原生JS 实现的input输入时表格过滤操作示例
10-16
在本文中，我们将深入探讨如何使用原生JavaScript实现一个输入框(input)实时过滤表格数据的功能。这个功能在很多数据展示场景中非常实用，比如搜索、筛选等。通过监听input元素的keyup事件，我们可以动态更新表格...
输入框过滤非数字的js代码
10-25
输入框通常使用HTML的`<input>`标签来创建，通过设置`type="text"`属性定义为文本输入类型。为了配合JavaScript过滤功能，输入框可以被赋予一个特定的ID，例如`id="only"`。 2. JavaScript的`window.onload`事件：...
js限制input标签中只能输入中文
10-24
为了实现这一功能，我们需要在输入框中添加相应的事件监听器，当用户输入或粘贴内容时触发这些监听器，并通过正则表达式匹配来过滤掉非中文字符。 首先，`<meta>`标签中设置`http-equiv="Content-Type"`和`content=...
过滤器过滤用户输入的非法字符
11-03
过滤器过滤用户输入的非法字符，如“” “%” “+”等需要的两个类XssFilter.java和XssHttpServletRequestWrapper.java
input框实现过滤搜索
xiaoming4965的博客
10-07 229
input框实现过滤搜索
TP5/TP6 input过滤方法常见使用方法
oChuCheng的博客
08-10 1775
开发无小事，作为一名优秀的开发人员，永远不要相信前端页面提交的数据是安全的，只有限定数据提交范围，才能尽可能保证平台安全。
js input输入框限制只输入中文（排除使用中文键盘输入字母）
bingzhangNANA的博客
08-31 1490
oninput="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" 一般写的是onkeyup事件，改为oninput事件是排除掉用户使用中文键盘输入了字母的情况 ...
INPUT标签选择器和使用、jquery过滤器
苏木三少
03-25 2135
INPUT标签选择器和使用1、input标签的组成2、input标签作用：3、【使用】一、过滤器语法介绍：1、对已经定位到jquery对象中DOM对象，进行二次筛选。2、过滤器不能独立使用，必须声明在选择器后面。3、六种过滤器（三种常见过滤器）4、将多个过滤器放到同一个jquery中进行层层过滤。二、基本过滤器：1、【过滤器条件】：根据以及定位的DOM对象在jquery对象存储位置进行二次过滤筛选。2【使用】：三、基本属性过滤器1、【过滤条件】：根据标签在声明时是否为指定属性进行手动赋值2【例子】3、【使用
如何在input框输的同时过滤不符合要求的内容
web_callBack的博客
11-20 1138
金额： 验证输入带有两位小数的数字 document.getElementById("input1").addEventListener("input",function(){ var obj=this; test(obj); }); function test(obj){ if(obj.value==""){
input输入过滤js
wwning的博客
11-07 1584
 html部分使用方式 其它的自己可以随便调用 Js部分 //只能输入数字、字母、小数点、汉字、@ function usrNameSet(num){ var str=num.value; //var str = document.getElementById("userName").value; var value=str.replace(/[^\a-\z\A-\Z0-9
input 输入过滤
my learning notes
04-28 2354
// keydown事件function keydown (evt) { // 键盘上的全部可打印键 var isPrintableKey = function (k) { return !(evt.altKey || evt.ctrlKey || evt.metaKey) && ( k === 32 || // 空格 (k >= 48 && k = 65 && k = 96 && k <= 10
element input多个过滤条件_Vue限制input仅能输入正整数或浮点数指令
weixin_33892912的博客
02-03 652
该指令主要解决了以下问题：v-model同步问题中文输入法导致input触发了但v-model同步失效可扩展到其他UI框架下，如element通常限制一个 input 仅能输入指定字符我们会去监听其input事件，然后通过正则过滤掉非法字符。然而在vue中，仅仅修改input的value并不会同步到 v-model 上。在vue官方文档中有提到 v-model 其实是 v-bind 和 v-on ...
elelemtui el-input输入框不允许输入下划线
最新发布
04-26
### 禁止 ElementUI 中 `el-input` 输入框输入下划线 为了实现在 ElementUI 的 `el-input` 组件中禁止用户输入下划线，可以通过监听用户的输入事件（如 `@input` 或者原生的 `onkeyup`），并对输入的内容进行过滤处理。以下是具体的实现方式： #### 方法一：通过正则表达式过滤 可以在 `el-input` 上绑定一个自定义函数来实时监控输入内容，并移除不符合条件的部分。 ```vue <template> <div> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="测试字段" prop="testField"> <el-input v-model="form.testField" @input="filterInput"></el-input> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { testField: '' }, rules: {} }; }, methods: { filterInput(value) { this.form.testField = value.replace(/_/g, ''); // 使用正则去除下划线[^1] } } }; </script> ``` 此方法利用了 JavaScript 正则表达式的替换功能，在每次用户输入时自动检测是否有非法字符（此处为 `_` 下划线），如果有，则将其删除。 --- #### 方法二：结合 Vue 自定义指令 如果项目中有多个地方需要用到类似的逻辑，可以考虑封装成全局指令以便重用。 ```javascript // 定义全局指令 Vue.directive('no-underline', { bind(el) { el.addEventListener('input', function () { const newValue = el.value.replace(/_/g, ''); if (newValue !== el.value) { el.value = newValue; const event = new Event('input'); el.dispatchEvent(event); // 手动触发 input 事件以更新双向绑定[^2] } }); } }); ``` 在模板中使用该指令如下所示： ```vue <el-input v-no-underline v-model="form.testField"></el-input> ``` 这种方式更加灵活且易于维护，尤其适合大规模应用中的统一管理需求。 --- #### 方法三：样式调整（仅隐藏视觉效果） 需要注意的是，“禁用下划线”的含义可能被误解为仅仅是外观上的改变而非实际行为限制。如果是希望单纯去掉光标处显示的下划线效果，可通过 CSS 调整 `.el-input__inner` 类的相关属性完成。 ```css .el-input__inner { text-decoration: none !important; /* 移除任何文本装饰 */ } ``` 不过这种方法并不会阻止用户实际键入下划线字符，因此需谨慎选用。 --- ### 总结 以上三种方案分别适用于不同的场景需求——当目标是严格控制数据有效性时推荐采用前两种技术手段；而后者更适合于追求界面美观度而不涉及深层交互的情形。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值