（火狐浏览器兼容） input type ="number"，输入英文字母的问题

最新推荐文章于 2023-05-05 14:48:30 发布
转载 最新推荐文章于 2023-05-05 14:48:30 发布 · 2.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/ssh159/article/details/80671716

本文探讨了在HTML中设置输入框仅接受数字输入的方法，包括使用number类型及正则表达式过滤非数字字符，解决了不同浏览器兼容性问题。

输入框设置只能输入数字，一般浏览器都正常识别number，不过能输入e，因为 e在数学上代表2.71828

1.有的人这么解决：

<input type='number' οnkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />

2.由于火狐里面没有 input type =“number” 这个设置，所以可以随机输入英文，

看了其他的文章用了第一个方法，火狐居然出现无法输入，无法删除的问题…

那么换一个方法，还是用正则：（设置 text类型，却只能输入数字，字母会自动删除）

<input  type="text" οnkeyup="this.value=this.value.replace(/[^\d]/g,'');"  >
补充总结html所有内容，html学习完这篇基本就差不多了
寒凡
07-05 575
网页的组成：图片 文本 视频 音频 超链接 等组成(用户角度)标签开发者：html标签：网页的内容，结构 --> 内容层css样式： 美化 装饰 装修网页 --> 表现层javascript(js): 网页和用户的交互行为 动态效果 ，前后端数据交互 --> 行为层可以放入图片 文本 视频 音频 超链接 等网页文件：后缀名/拓展名 是html的文件运行环境：浏览器浏览器：360 qq 百度 uc 2345 浏览器， 谷歌浏览器，火狐，欧朋。...
JavaScript—进阶篇
weixin_44595042的博客
03-10 3058
JavaScript—进阶（笔记）第1章 系好安全带,准备启航1-1 让你认识JS 简介： 做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的。 课程须知： 您至少掌握HTML+CSS基础知识 学习内容： 通过JavaScript学习，掌握基本...
前端：（火狐浏览器兼容） input type ="number"，输入英文字母的问题
凉城古梦猫扑街的博客
06-12 9463
输入框设置只能输入数字，一般浏览器都正常识别number，不过能输入e，因为 e在数学上代表2.718281、有的人这么解决：&lt;input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /&gt;2、由于火狐里面没有 input type ="number" 这个设置...
解决火狐浏览器中关于只允许输入带小数的input框输入问题
学者-微风
08-27 787
项目中有个字段“价格”，要求页面上控制input框为 xxxx.xx 如：11,或22.33 或者 444.33，且除了“小数点”和“数字”之外不允许输入其他字符。 修改前的代码： @type = "number", @step = "0.01", @oninput = "value=value.replace(/^\\D*(\\d*(?:\\.\\d{0,2})?).*$/g, '$1')" 问题：这种设置在“谷歌浏览”中完全没问题，但是在“狐火浏览器”中是有问题的； 修改后的代码： @...
火狐input只能输入数字
09-02
火狐input只能输入数字,只能是数字啊，
关于firefox(火狐)下input type=number输入小数输入框报错的解决
huang007guo的专栏
07-23 3881
firefox 下 默认情况 &lt;input   type="number"&gt; 只允许整数其他的都会报错，红色提示， 这时候可以添加参数 step="0.01"  &lt;input   type="number" step="0.01"&gt;解决问题！...
兼容火狐 数字输入框type[number]限制输入两位小数
沙漠面包的博客
12-17 2460
不啰嗦，上代码 HTML代码： @keyup，vue给input绑定onkeyup事件，其他语法请自行变通。 &lt;input type='number' step='0.01' @keyup='oninput'/&gt; &lt;!-- step 精度--&gt;  JS代码： 如果不加上  if return 这段代码，火狐浏览器会出现输入“.”就被正则干掉 oninput(...
前端面试题
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
原js笔记
Pwsifeng的博客
01-10 3012
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
关于input type=“number“ 的兼容问题
Uncle_Jeff的博客
04-07 1287
关于input type=“number” 的兼容问题 对于input来说，type="number"可以限制其只能输入数字，但是部分浏览器不支持该属性，如火狐浏览器。 对此，可以利用input监听事件来控制其只能输入数字。 以下为vue项目中结合elementUI的实例 <el-form-item label="期末评估" required> <el-input v-model="evaluateForm.score" placeholder="输入评分" type="text" @
【前端笔记】20191204-火狐浏览器输入框type="number"小数有红框的兼容性问题
向着光芒的女孩
12-06 488
(1))【重点】火狐浏览器当输入框type=”number”输入小数会有红框的兼容性问题 可以要设置step属性，如step=”0.0001”,则四位小数不会红框，五位小数会红框 (2)js的类型是弱类型，转化时要特别注意，今天遇到 [“All”]==”All” 为 true (3)数组的使用 shift: 删除第一个元素 pop: 删除最后一个元素 (4)vue组件进行数据回显 需要特别注意对象...
input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题
weixin_30814319的博客
12-03 591
问题一：firefox下默认情况 <input type="number"> 只允许输入整数，输入小数时会报错，输入框被标红 这时候可以添加参数step="0.01" <input type="number" step="0.01">解决问题！ 问题二：input 属性为 number，maxlength在任何浏览器上不起作用 ...
input type="number" 兼容火狐浏览器
A_shy_dove的博客
10-15 1537
<input class="s-row-col_input" type="number" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" />
html输入框中文问题,移动端input框type为number仍可以输入中文的问题
weixin_33662445的博客
06-09 1539
本文主要针对IOS做了测试，对安卓测试较少，但问题应该是通用的。首先这个问题非常棘手，因为这可能是浏览器的一个bug，当用户在type=number的input框输入中文时，这个值其实并不会被接收，但是有时会被展现。即：它会像普通值一样显示，但是双向绑定的参数接收不到中文值，一般为空字符串。type=number会吊起数字键盘，很多产品设计倾向于此，但是目前来看各系统(浏览器)对此兼容并不好。这类...
在Chrome与火狐中，输入框input类型为number时，如何去除掉的自带的上下默认箭头...
weixin_30363981的博客
01-15 524
如何移除input='number'时浏览器自带的上下箭头： CSS样式： /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { // chrome -webkit-a...
关于火狐input number不生效的另一种解决方式
星尘的博客
08-25 1299
记录一个关于火狐input number不生效的另一种解决方式 // （一） <input id="test" oninput="this.value=isNaN(this.value)?'':this.value.replace(/[^\d]/,'')" /> // （二）js创建 $("#test").attr("min", "1") $("#test").attr("type", "text") $("#test").attr("oninput","this.value=isNaN(th
elementui中的el-input-number只能输入数字
godming的博客
11-24 5140
1.需求是只能输入数字，输入框中不能有除数字外的文字 查询资料发现都说加这段代码 onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 但是在火狐中输入框中仍然能输入除数字外的文字， 给el-input-number加input事件，因为是组件所以是@input.native： <el-input-number v-model="num" onKeypress="return (/[\d]/..
input处理number类型
m0_38135164的博客
05-05 175
公用方法
火狐浏览器el-input-number可以输入字母
最新发布
02-14
对于火狐浏览器中 `el-input-number` 组件可以输入字母的问题，在其他主流浏览器可能不会遇到此情况，但在 Firefox 中确实存在该现象。为了防止用户在 `el-input-number` 输入框内输入非数值字符，可以通过监听键盘...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值