开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js让输入框不能输入数字指定字符

在JavaScript中，如果你想让输入框不能输入特定的数字或字符，可以通过监听输入框的input事件并使用正则表达式来实现过滤。以下是一个示例代码，展示了如何阻止用户输入特定的数字（例如“1”和“2”）以及指定的字符（例如“a”和“b”）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止输入特定字符</title>
<script>
function preventSpecificInput(event) {
  const regex = /[12ab]/g; // 定义要禁止输入的字符集合
  const inputChar = String.fromCharCode(event.charCode); // 获取输入的字符
  if (regex.test(inputChar)) {
    event.preventDefault(); // 阻止输入
  }
}
</script>
</head>
<body>
  <input type="text" onkeypress="preventSpecificInput(event)" placeholder="请输入文本">
</body>
</html>

在这个示例中，我们定义了一个函数preventSpecificInput，它会在用户按键时被调用。函数内部使用正则表达式/[12ab]/g来匹配那些不应该被输入的字符。如果输入的字符匹配正则表达式，event.preventDefault()会被调用来阻止这个字符被输入到文本框中。

这种方法的优势在于它简单且易于理解，可以快速实现特定字符的过滤。然而，它也有一些局限性，比如它依赖于键盘事件，可能无法处理所有情况（例如粘贴操作或通过其他方式输入的字符）。

应用场景包括但不限于：

表单验证，确保用户输入的数据符合特定的格式要求。
用户名或密码输入，防止用户使用容易被猜测的字符组合。

如果你遇到了问题，比如某些字符仍然能够被输入，可能是因为正则表达式没有正确匹配到这些字符，或者是事件监听没有正确设置。检查正则表达式是否包含了所有需要禁止的字符，并确保onkeypress事件正确绑定到了输入框上。

此外，如果你需要更复杂的输入控制，可能需要考虑使用更高级的表单验证库，或者在服务器端进行额外的验证。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS 限制输入框只输入数字和小数点

只允许数字： <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace...="if(isNaN(value))execCommand('undo')" > 火狐下js设计：数字和..../g,""); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/^\....obj.value = obj.value.replace(/\.{2,}/g,"."); //保证.只出现一次，而不能出现两次以上 obj.value = obj.value.replace

7.4K3 0

动手写个数字输入框2：起手式——拦截非法字符

前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。...本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[type=number]的遗憾》《动手写个数字输入框2：起手式——拦截非法字符》《动手写个数字输入框3：痛点——输入法是个魔鬼...》《动手写个数字输入框4：魔鬼在细节——打磨光标位置》从源头抓起——拦截非法字符从《动手写个数字输入框1：input[type=number]的遗憾》中我们了解到input[type=number...]基本不能满足我们的需求，为了简单化我们就直接在input[type=text]上加工出自己的数字输入框吧。 ...因此我们要继续补充下面两步，并且由于keydown事件触发时value值还没被修改，于是我们需要将value值和当前输入值做组合来做预判，进一步扩大非法字符集。

8838 0

VUE 过滤输入框中的特殊字符只保存中文、英文及数字

首先是输入框绑定好model 输入消息内容" v-model="keyword"> 然后使用watch监听model的变化并过滤掉特殊字符... function filterInput(val) { // 这里过滤的是除了中英文和数字的其他字符 return val.replace(/[^a-zA-Z0-9\u4e00

3.7K3 0

通过正则表达式限制输入框只能数字，且不能以0开头

最近在做项目的时候有个需求，输入框输入金额的。这个金额只能是整数，我们都知道金额肯定不能以0开头。...var value = val.replace(/\D/g, '') 上面这行代码的意思是当输入的是除了数字以外的字符时用空代替。这时候我们再进行处理0开头的输入即可。...下面这段是我开发小程序的时候写的，这个numInput当每次输入框的值发生变化的时候就会进入。...补充：写了一段js的代码功能与上面相同。输入整数金额 <body

5.1K3 0

Excel实战技巧59：使用VBA让用户仅能在指定单元格或单元格区域中输入数字

通常，我们可以使用Excel的“数据验证”功能来设置指定单元格或单元格区域仅能输入指定范围的整数或者小数，如下图1所示。 ?...例如，我们想要限定用户在单元格区域B2:D6中仅能输入数字。...'如果不是数字则清空 If Not IsNumeric(rng.Value) Then rng.Value = vbNullString...End If End If Next rng Application.EnableEvents = True End Sub 这样，在该工作表单元格区域B2:D6中，如果输入的是非数字...并且，这个单元格区域可以输入整数或小数。欢迎在下面留言，完善本文内容，让更多的人学到更完美的知识。

2.6K2 0

【Html.js——随机密码生成器】不能说的秘密（蓝桥杯真题-2338）【合集】

密码长度输入框：用户可以输入 4 到 20 之间的数字作为密码长度...设置项样式： .setting：使用 Flexbox 布局，使设置项中的标签和输入框水平分布，并居中对齐，同时添加上下外边距。...，并将其显示在输入框中。...使用 for 循环生成密码，在每次循环中，根据用户选择的字符类型随机添加字符到密码字符串中，直到密码长度达到指定值。最后返回生成的密码字符串。...四、工作流程 ▶️ 用户打开网页，看到密码生成器的界面，包括密码显示框、密码长度输入框、复选框和生成按钮。用户根据需要设置密码长度和包含的字符类型。用户点击 “生成密码” 按钮。

651 0

JavaWeb day3 JavaScript入门

标签标签不能自闭合在页面中引入外部js文件时，不能写成 <script src=".....，和java语言基本都相同组成字符可以是任何字母、数字、下划线（_）或美元符号（$）数字不能开头建议使用驼峰命名 JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样作用域...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。...正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。正则表达式是和语言无关的。...：代表任意单个字符，除了换行和行结束符 \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9] \d：代表数字字符：相当于 [0-9] 量词： +：至少一个

7.4K2 0

JavaWeb day3 JavsScript 入门

属性指定 js 文件的 URL 路径。...标签标签不能自闭合在页面中引入外部js文件时，不能写成 js 中的变量名命名也有如下规则，和java语言基本都相同组成字符可以是任何字母、数字、下划线（_）或美元符号（$）数字不能开头建议使用驼峰命名 JavaScript 中 var 关键字有点特殊，...正则对象是判断指定字符串是否符合规则。...正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。正则表达式是和语言无关的。

7.5K1 0

web前端学习：HTML5十个新特性

autofocus：自动获得输入焦点 form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果... 验证属性(了解即可)： required：输入框内容不能为空 ...min：允许输入的数字最小值 max：允许输入的数字最大值 minlength：允许输入的字符串最小长度... maxlength：允许输入的字符串最大长度 pattern：输入框内容必须符合的正则表达式...Canvas与SVG的不同： (1)Canvas是位图；SVG是矢量图 (2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素) (3)Canvas内容不能使用CSS；SVG

2.9K1 0

微信小程序开发实战（9）：单行输入和多行输入组件

String类型，输入框为空时显示的文本 placeholder-style：String类型，指定 placeholder 的样式 placeholder-class：String类型，指定 placeholder...auto-focus：Boolean类型，默认值是false，该属性为true，可以让当前输入框自动获得焦点，并且自动弹出软键盘。...同一个wxml文件中，只能有一个输入框设置该属性为true，输入框还包括后面要介绍的textarea组件 focus：Boolean类型，默认值是false，该属性可以让输入框获的焦点，目前开发工具暂不支持...处理函数可以直接 return 一个字符串，将替换输入框的内容 bindfocus ：EventHandle类型，输入框获得焦点时触发，event.detail = {value: value} bindblur...input还支持几种输入类型，如数字、身份证、表情等，这些输入类型，并不是指不能输入其他的字符，而是指软键盘的乐行，例如，数字输入类型，弹出的是输入输入键盘（只包含10个数字键和其他几个字符的软键盘）。

3K2 0

JavaScript 数据类型

; // 报错，不能单双引号搭配 # 字符串转义符类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。...，因为变量可以很方便地修改里面的值变量是不能添加引号的，因为加引号的变量会变成字符串如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间让用户输入年龄（用户输入） //把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理） //使用alert语句弹出警示框...（prompt），让用户输入出生年份（用户输入） // 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部） //弹出警示框（alert...，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

8504 0

正则表达式常见用例原

; 例2、（1）验证输入框的数值，只能输入1-10的数字(验证输入框的值是不是/^([1-9]|10)$/) function test(){ var text = document.getElementById... alert("ok") }else{ alert("no") } } （2）验证输入框的值是否全为数字...1-9]$/g alert("ok") } else { alert("no") } } （3）替换输入框中的数字为空...匹配方括号的中任意字符，包括转义序列。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。...它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。

6342 0

html标签详解

注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 p标签不能包含块级标签。.../dt> 内容1 内容2 表格表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号...input系列 type属性值表现形式对应代码 text 单行输入文本 password 密码输入框 ...password：密码输入框 radio：单选框 checkbox：多选框 submit：提交按钮 button：可点击的按钮，没有任何行为，一般配合JS使用 hidden：对用户不可见，通常用于修改某条数据时...：禁用模式（输入框显示灰色），所有input均适用当type=text的时候，可以设置输入框的默认值，以及提示语：如果需要给默认值可以用value=‘默认值’来设置，如果需要提示则用placeholder

2.6K11 0

【JavaEE初阶】JavaScript(WebAPI)

, 标签中的内容都可以通过JS对象感知到, JS对象修改对应的属性能够影响到标签的展示, 通过这样的DOM API就可以让JS代码来操作页面元素. 2.2常用的DOMAPI 2.2.1.选中页面元素在...API能够操作的全部属性, 比如img元素. 4.获取/修改表单元素属性这里把表单元素单拎出来是因为, 表单元素中有一些特别的属性是普通标签没有的, 主要需要区别的是一些表单元素想要获取其中用户输入的内容的话是不能通过...,比较用户输入的数字和生成的随机数大小 let input = document.querySelector('input');//标签选择器 let resultDiv...if(input.value == ''){ //输入框没有值,用户未输入,直接返回 return;...//点击时,获取到三个输入框的文本内容 //创建一个新的div.rom把内容构造到这个div中即可.

2552 0

表单常用的控件有哪些_html表单控件样式修改

表单特性　　value属性规定输入字段的初始值；　　readonly属性规定输入字段为只读（不能修改）； readonly属性不需要值，它等同于readonly=“readonly”。　　...没有属性值　　size属性规定输入字段的尺寸（以字符计）；　　maxlength属性规定输入字段允许的最大长度；该属性不会提供任何反馈。...H5新增表单特性 placeholder 　　输入框提示信息　　autocomplete 是否保存用户输入值（默认为on，关闭提示选择off）　　autofocus 　　　指定表单获取输入焦点...提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。...number 只能包含数字的输入框 color 颜色选择器 datatime 显示完整日期在opera浏览器下作用 datetime-local 显示完整日期不含时区

3.9K2 0

Validate表单验证

在validate中的rules中编写验证规则（格式如下）字段的name属性:“校验器”（tisps:一个输入框只有一个校验器的时候使用）字段的name属性:{校验器:值,校验器:值}(tips...:输入框需要有多个校验器的时候使用) 在validate中的messages中编写提示信息(tips格式与rules相对应) 在validate中的submitHandler中编写验证通过执行的内容图示如下...3 remote url路径使用ajax进行验证 4 date 数字正确格式日期 tips:ie6有bug 5 dateISO 字符串正确格式的日期例如：2018-11-28，2018/11/...11 maxlength 数字最大长度 12 minlength 数字最小长度 13 rangelength [min,max] 输入长度必须在 min和 max之间的字符串（tips:汉字算一个字符...） 14 range [min,max] 输入值必须在 min和 max之间的数字 15 max :n 最大值不能大于n 16 min :n 最小值不能小于n

3.7K5 0

如何从 0 到 1 实现一个支持排序、查找、分页的表格组件（React版）

本案例将使用 React 进行介绍（更多讲解其实现的原理和步骤，你可以用其他框架进行实现），具体列表如下图所示，有姓名、年龄、是否经理人、入职日期这几列，我们可以在各列表头下面的输入框进行模糊搜索内容，...开始之前，我们在来总结下项目的需求：支持列表的分页支持字符串、布尔值、数字及日期的升序和倒序排列支持字符串、布尔值、数字和日期的数据查询本案例不会借助其他的第三方组库（除了基础的React）,我们从...我们需要创建一个搜索对象，用来分别存储搜索的键(列名)和对应值（输入框的值），由于支持多属性键值，可以支持多个列的复合查找。...如果用户在输入框里输入了任何内容，我们需要将其添加到我们定义的搜索对象里，如果用户将输入项删除，我们还需要将其搜索对象的属性Key值进行删除，具体的输入框的查找事件定义如下： const handleSearch...接下来你可以这样继续改进它：将查找布尔类型的输入框更改为下拉框将查找日期类型的输入框更改日期选择类型的输入框实现年龄、日期的按范围搜索尝试找到本案例存在的未知BUG 尝试用 Vue 框架改写本案例

2.5K2 0

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在...减去键盘的高度，需要手动去触发让视窗高度回到正常，然后试了很多方法都没成功，后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常 13.禁止用户选中文字...解决：利用 js获取文字 line-height再去设置 div高度 18.使用 background时， background-position里使用了比如 center left后不能再加具体的数值去定位...，系统不会自动监控你选择文字的事件，比如打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但无法在用户确定自己的输入时监控到 keyup（其他事件也一样）判断字符数。...4.微信 jssdk里预览图片接口，图片的 url不能填 base64编码， ios上会很卡，估摸着微信得卡个 5秒左右才打得开，而 android上压跟就卡住或者一直卡在读取图片界面 5.微信当在输入框里输入消息时

3.7K4 0

从编程小白到全栈开发：改造为全栈计算器

现在，我们要改造它，让它只负责获取用户输入内容，并不做运算，运算的工作，将发往服务器。...来看下我是怎么改造它的： function calc() { // 获取id为num1的输入框 var num1El = document.getElementById('num1');...// 从num1输入框获取文字内容并转换成数字类型 var num1 = parseFloat(num1El.value); // 获取id为num2的输入框 var...num2El = document.getElementById('num2'); // 从num2输入框获取文字内容并转换成数字类型 var num2 = parseFloat(num2El.value...不能正常工作。

7473 0

如何使用小程序表单组件

，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。...number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 confirm-type 有效值值说明...又比如你想设置一个密码是输入框，并且输入密码的时候，优先弹出的是数字键盘，那么可以使用下面的代码。..." /> Hello World - textarea多行输入框某些情况下，单行输入框不能满足我们的要求，这就需要多行文本框，官方也提供了多行文本框的组件...第二个点击之后，系统会自动聚焦到输入框，并弹出输入法，我们来看看具体的属性内容。

5.2K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭