input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题

最新推荐文章于 2023-03-03 10:43:26 发布
转载 最新推荐文章于 2023-03-03 10:43:26 发布 · 238 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/HYZhou2018/p/11159255.html

博客主要解决两个信息技术相关问题。一是Firefox下输入框默认只允许整数，输入小数报错，添加参数step='0.01'可解决；二是input属性为number时，maxlength在各浏览器均不起作用，wap项目中，若只需整数可用type=tel代替，若需小数则添加input方法替代。

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

问题一：firefox 下 默认情况 只允许输入整数，输入小数时会报错，输入框被标红

这时候可以添加参数 step="0.01" 解决问题！

问题二：input 属性为 number，maxlength在任何浏览器上不起作用

如果是wap项目

方法一：如果该输入框只要求输入整数，可以使用type=tel代替，这时maxlength属性就生效了
因为type=tel在移动端调用的键盘上没有“.”这个键，所以该方法不适用可以输入小数的情况

方法二：添加一个input方法，代码如下，用下面的方法代替maxlength

转载于:https://www.cnblogs.com/HYZhou2018/p/11159255.html

vue 输入框限制3位小数_Vue中实现输入框Input输入限制
weixin_39679718的博客
12-19 2095
在开发过程中，基本都遇到过需要限制输入的情况，比如金额、仅字母数字、可输入小数位等，网上搜了很多方法也遇到一些坑，所以分享出来。震惊：阿里腾讯一线大厂前端面试学习经验，最完整面试真题分享！_前端交流群:954854084-优快云博客​blog.youkuaiyun.com1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如：.number可以实现限制数字输入，但是会有以...
html 解决input输入框在火狐浏览器不能输入小数问题
PrimaryColor
09-28 654
代码： <input type="number" step="0.01"/>
解决input type=“number“ 保留两位小数使用火狐浏览器有奇怪的红色边框
chenchuwai的博客
07-16 534
火狐浏览器输入包含小数的数字，保留两位小数后出现奇怪的红色边框。 解决方法：多加一个step=".01" 例子： <td colspan="3"><input type="number" step=".01" id="amount" name="amount" maxlength="100" value="<%=amount%>" onblur="formatDecimal(event)"/></td> 显示效果： 参考链接：https://st
【前端笔记】20191204-火狐浏览器输入框type="number"小数有红框的兼容性问题
向着光芒的女孩
12-06 472
(1))【重点】火狐浏览器当输入框type=”number”输入小数会有红框的兼容性问题 可以要设置step属性，如step=”0.0001”,则四位小数不会红框，五位小数会红框 (2)js的类型是弱类型，转化时要特别注意，今天遇到 [“All”]==”All” 为 true (3)数组的使用 shift: 删除第一个元素 pop: 删除最后一个元素 (4)vue组件进行数据回显 需要特别注意对象...
input标签type=“number” 输入小数外框变红的问题
向阳光木的博客
10-29 911
input标签type=“number” 输入小数外框变红的问题 input标签type="number"定义带有 spinner 控件的数字字段，输入小数外框变红，是因为默认只可以输入整数，输入小数需要改变步长，使用"step"属性定义步长，即最小增减单位。 点击输入框右侧上下箭头，默认步长为整数1 此情况下输入小数外框变红 设置属性step="0.00000001"可输入八位小数（边框不变红） ...
number类型的input输入小数点的bug
dingyansui5428的博客
06-02 1312
<input type='number' name='amount'> 场景是输入金额。 number类型貌似只是限制了不能输入数字和小数点之外的字符，但多个小数点和多个前置零都不会报错； 多个小数点的情况下取出来的值都是零，暂时未能解决，先记录。 最后的解决办法是放弃number类型用text，阻止数字和点之外字符的输入，只允许存在一个小数点并且小数点在倒数三位内。 转...
input type 为 number自动保存两位小数
04-03
嗯，用户之前问过如何让input自动聚焦，现在又问了关于input type为number时自动保存两位小数的问题。看来用户可能是在开发一个需要处理表单输入的网页应用，尤其是涉及数值输入的情况。用户的需求可能是确保用户...
input的type属性为number默认保留俩位小数 没有就补全
06-04
1. **HTML设置**: 创建一个input框，设置为`type="text"`以确保灵活输入（使用`type="number"`在某些场景下有bug，如引用[1]所述，可能导致小数点输入问题）。添加必要属性如`placeholder`提示用户。 2. **...
兼容firefox的文本框只能输入两位小数的数字的代码
10-29
标题和描述提到的代码就是这样一个示例，它实现了在Firefox和其他浏览器（包括IE）中，文本框只能输入最多两位小数的数字，同时排除其他非数字字符。 首先，我们来看关键的JavaScript函数`checkNumber(e, txt)`。这...
input输入框number类型默认显示两位小数
最新发布
08-07
首先，用户的问题是：他想设置HTML中type为number的输入框默认显示两位小数。具体来说，是“html input number 默认显示两位小数”。 我需要参考系统级指令： - 所有行内数学表达式用$...$，但这里可能不涉及数学...
关于火狐input number不生效的另一种解决方式
星尘的博客
08-25 1274
记录一个关于火狐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
前端：（火狐浏览器兼容） input type ="number"，输入英文字母的问题
凉城古梦猫扑街的博客
06-12 9417
输入框设置只能输入数字，一般浏览器都正常识别number，不过能输入e，因为 e在数学上代表2.718281、有的人这么解决：&lt;input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /&gt;2、由于火狐里面没有 input type ="number" 这个设置...
type为number的input标签输入小数的方法
热门推荐
Eruituoa的博客
09-17 7万+
type为number的input标签输入小数的方法
解决input框type为number输入小数的方法
徊忆羽菲
08-16 1万+
解决input框type为number输入小数的方法type为number type为number input标签当type为number时，只能输入数字 其中有max和min属性，是限制输入数字的大小，当想输入小数时，可以把步数step改为小数，如step = 0.1 如： <input type="number" value="1" max="20" min="0.5" step="0.1"> value=“1” 默认值为1 max=“20” 最大值20 min="0.5"最小值0.5
关于Html5中input标签只能输入整数的问题
geekfly的Blog
05-26 6万+
<input type="number" name="points" min="1" max="10" />使用这句话时，输入框只能输入整数，要想输入小数，我们可以这样修改：<input type="number" value="1" min="0.0" step="0.1">例如上句，最小值为0，每一步步长为0.1，既可以
数字输入框不能输入小数
qq_41536505的博客
03-03 2330
这个数字输入框不能输入小数面对这个问题，有两种方法可以解决， 可以按照两种方法来解决这个问题， 具体现在哪种可以看需求处理。
移动端input提起数字键盘如何设置小数点？
前端菜菜DayDayUp的博客
10-29 3831
1.安卓 <input type="number"> <input type="tel"> 调起数字键盘； 2.ios 方法：pattern=“number”，可以直接打开输入法的数字键盘,可以输入.和数字。pattern="[0-9]*" 则是可以调九宫格，只能输入数字,比如输入手机号。 综合代码： <input type="number" pattern="number">//输入.和数字 <input type="number" patte.
vue2中el-input在type为number类型下如何不显示输入框右侧的计数图片
06-27
在ElementUI中，el-input组件在type="number"时会显示浏览器默认的数字输入框样式，其中包括右侧的上下箭头（spinner）。但是，ElementUI并没有提供直接的属性来隐藏这些箭头。因此，我们需要通过CSS来隐藏它们。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值