type="number"的input怎么能让宽度自适应内容？（宽度随着输入数字的多少而变化）

Posted 2023-04-11

参考技术A <input type="number" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>1?this.value.length:1);" size="1">

Chrome 上浮点数的 HTML 5 input type="number" 元素

【中文标题】Chrome 上浮点数的 HTML 5 input type="number" 元素

【英文标题】：HTML 5 input type="number" element for floating point numbers on Chrome

【发布时间】：2014-05-04 11:34:26

【问题描述】：

我需要让用户输入浮点数，所以我使用了以下元素：

<input type="number" name="my_number" placeholder="Enter number"/>

在 Firefox 上运行良好，但当我尝试输入小数时，Chrome 会抱怨数字不是整数。这对我来说是个问题。如果我输入 step 属性，那么 Chrome 允许浮点数：

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

但问题是无法输入 0.15...step 似乎不适合我的需要。 W3C spec 在 input type="number" 的所有属性中都提到了浮点数。

如何让 Chrome 接受没有 step 属性的浮点数？

【参考方案1】：

试试这个

<input onkeypress='return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46'>

【讨论】：

&& !isNaN(this.value) 或者 this.value.split('.').length==1

【参考方案2】：

注意：如果您使用的是 AngularJS，那么除了更改步长值之外，您可能还需要在 html 输入中设置 ng-model-options="updateOn: 'blur change'"。

这样做的原因是为了减少验证器的运行频率，因为它们会阻止用户输入小数点。这样，用户可以输入小数点，验证器在用户模糊后生效。

【参考方案3】：

如果您的目标是小数点后 2 位，请尝试 <input type="number" step="0.01" /> :-)。

【讨论】：

你当之无愧，最简单的解决方案，我不得不搜索它几个几乎都出错了......谢谢

【参考方案4】：

试试<input type="number" step="any" />

不会出现验证问题，箭头的步长为“1”

约束验证：当元素具有允许的值步时，并且 应用算法将字符串转换为数字的结果 由元素的值给出的字符串是一个数字，并且 从步基中减去的数字不是的整数倍 允许的值步，该元素正遭受步不匹配。

以下范围控件仅接受 0..1 范围内的值，并且 允许该范围内的 256 步：

<input name=opacity type=range min=0 max=1 step=0.00392156863>

以下控制允许选择一天中的任何时间，任何 准确度（例如千分之一秒或更高）：

<input name=favtime type=time step=any>

通常，时间控制是 精度限制为一分钟。

http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step

【讨论】：

效果很好！这是规范的一部分还是只是一个奇怪的解决方法？

这在 Chrome 中可以正常工作，但在 Firefox 31 ESR 或 Firefox 34 中不行。我不得不求助于 input="text" 来获得我想要的。 Firefox 和 HTML5 确实需要齐心协力。

我遇到的一个问题，即使在 Chrome 上，也可以在输入中输入“e”或“ee”（因为 e 是一个数字），但在 Angular 中，该值最终为“未定义” "。