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

最新推荐文章于 2023-04-14 17:02:00 发布
最新推荐文章于 2023-04-14 17:02:00 发布
阅读量9.3k 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ssh159/article/details/80671716
版权

输入框设置只能输入数字，一般浏览器都正常识别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常用标签和属性
前端知识分享喵
06-12 1604
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1319
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
火狐input只能输入数字
09-02
火狐input只能输入数字,只能是数字啊，
（火狐浏览器兼容） input type ="number"，输入英文字母的问题
weixin_42508745的博客
10-14 2238
输入框设置只能输入数字，一般浏览器都正常识别number，不过能输入e，因为 e在数学上代表2.71828 1.有的人这么解决： <input type='number' οnkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /> 2.由于火狐里面没有 input type =“number” ...
input type="number" 兼容火狐浏览器
A_shy_dove的博客
10-15 1483
<input class="s-row-col_input" type="number" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" />
兼容火狐 数字输入框type[number]限制输入两位小数
沙漠面包的博客
12-17 2394
不啰嗦，上代码 HTML代码： @keyup，vue给input绑定onkeyup事件，其他语法请自行变通。 &lt;input type='number' step='0.01' @keyup='oninput'/&gt; &lt;!-- step 精度--&gt;  JS代码： 如果不加上  if return 这段代码，火狐浏览器会出现输入“.”就被正则干掉 oninput(...
input中的兼容性问题
weixin_43612234的博客
01-23 930
解决前端input在安卓和ISO中 的兼容性问题。 1.安卓的 2.iOS的 因为我的手机时安卓的，测试的时候安卓是没有问题的，但是iOS就出现了以上的情况，一开始以为是样式的问题，后面设置看也不行，试了一下的方法就可以了。 //在input标签中添加这两个属性，就可以了。 box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:no...
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1376
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
前端面试题
热门推荐
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 你能...
前端知识点一
huanhuan_Coder的博客
03-11 573
1、id和class的区别和联系。 联系：class 和id都是用来选择调用CSS样式属性。 区别：class：.css5{属性：属性值;}可以无数次调用。id：代表着标签的身份，只能出现一次，并且具有唯一性。 ...
关于firefox(火狐)下input type=number输入小数输入框报错的解决
huang007guo的专栏
07-23 3818
firefox 下 默认情况 &lt;input   type="number"&gt; 只允许整数其他的都会报错，红色提示， 这时候可以添加参数 step="0.01"  &lt;input   type="number" step="0.01"&gt;解决问题！...
EditText中inputType="number"还可输入字母的设置
Elise1的专栏
03-08 4553
<EditText android:id="@+id/register_detailidcard" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_toEndOf="@id/r
input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题
weixin_30814319的博客
12-03 549
问题一：firefox下默认情况 <input type="number"> 只允许输入整数，输入小数时会报错，输入框被标红 这时候可以添加参数step="0.01" <input type="number" step="0.01">解决问题！ 问题二：input 属性为 number，maxlength在任何浏览器上不起作用 ...
火狐浏览器只能输入数字不生效（replace(/[^\d]/g,‘‘)）
migexiaoliang的博客
03-20 819
有时候使用el-table列表来进行编辑，需要校验el-input框只能输入数字，但是使用却无法进行拦截。
【前端笔记】20191204-火狐浏览器输入框type="number"小数有红框的兼容性问题
向着光芒的女孩
12-06 456
(1))【重点】火狐浏览器当输入框type=”number”输入小数会有红框的兼容性问题 可以要设置step属性，如step=”0.0001”,则四位小数不会红框，五位小数会红框 (2)js的类型是弱类型，转化时要特别注意，今天遇到 [“All”]==”All” 为 true (3)数组的使用 shift: 删除第一个元素 pop: 删除最后一个元素 (4)vue组件进行数据回显 需要特别注意对象...
在Chrome与火狐中，输入框input类型为number时，如何去除掉的自带的上下默认箭头...
weixin_30363981的博客
01-15 498
如何移除input='number'时浏览器自带的上下箭头： CSS样式： /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { // chrome -webkit-a...
解决火狐浏览器中关于只允许输入带小数的input框输入问题
学者-微风
08-27 734
项目中有个字段“价格”，要求页面上控制input框为 xxxx.xx 如：11,或22.33 或者 444.33，且除了“小数点”和“数字”之外不允许输入其他字符。 修改前的代码： @type = "number", @step = "0.01", @oninput = "value=value.replace(/^\\D*(\\d*(?:\\.\\d{0,2})?).*$/g, '$1')" 问题：这种设置在“谷歌浏览”中完全没问题，但是在“狐火浏览器”中是有问题的； 修改后的代码： @...
关于HTML5中input框type=number取值的问题
william 成长路上
01-07 7632
在HTML5中，新增了type=number的类型，这个类型有一些隐藏的问题。    在W3C规范中，如果输入了一些非数字的字符，就会返回空字符串。    http://www.w3.org/TR/html5/forms.html#number-state-(type=number)    这个事情非常坑，会导致验证的时候如果输入非数字的时候，直接.value( 或者$('.selector
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 6720
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
火狐浏览器el-input-number可以输入字母
最新发布
02-14
### 解决方案 对于火狐浏览器中 `el-input-number` 组件可以输入字母的问题，在其他主流浏览器可能不会遇到此情况，但在 Firefox 中确实存在该现象。为了防止用户在 `el-input-number` 输入框内输入非数值字符，可以通过监听键盘事件并阻止非法键入来实现[^1]。 下面是一个基于 Vue.js 的解决方案： ```vue <template> <div> <!-- 使用自定义指令 v-onlyNumber --> <el-input-number v-model="num" v-onlyNumber></el-input-number> </div> </template> <script> export default { data() { return { num: null, }; }, directives: { onlyNumber: { bind(el) { function handleInput(event) { const keyCode = event.keyCode; // 判断按键是否为数字(48-57)，小键盘数字(96-105), Backspace, Delete, ArrowLeft, ArrowRight if ( (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || [8, 46, 37, 39].includes(keyCode) ) { return true; // 允许操作 } else { event.preventDefault(); // 阻止默认行为 } } el.onkeydown = handleInput; // 清除绑定的事件处理器 el._vOnlyNumberOldOninput = el.oninput; el.oninput = () => { let value = el.value.replace(/[^\d]/g, ''); el.value = value; if (typeof el._vOnlyNumberOldOninput === 'function') { el._vOnlyNumberOldOninput(); } }; }, }, }, }; </script> ``` 通过上述方法可以在不改变原有逻辑的情况下有效拦截非数字字符的录入，并确保即使用户尝试粘贴或拖拽文本到输入框时也能保持数据的有效性[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值