允许在 HTML5 数字输入中使用特殊字符/分数 [英] Allow special characters / fractions in HTML5 number input

问题描述

我有一个 html5 数字输入:<input type="number"/>

I have an html5 number input: <input type="number" />

我希望它接受分数和带分数，例如 38 1/2 以及整数和小数.

I would like it to accept fractions and mixed numbers, such as 38 1/2 as well as whole numbers and decimals.

我解析分数服务器端.

当前，当输入失去焦点时，浏览器将输入更改为 38.

Currently, when the input loses focus, the browser changes the input to 38.

当前的解决方法是使用纯文本输入，但我希望使用 type="number" 的好处，例如移动设备上的特定键盘.

A current workaround is using a plain text input, but I would like the benefits of using type="number" such as specific keyboards on mobile.

推荐答案

<input type="number"> 元素被定义为创建一个与浏览器相关的、与浏览器区域设置相关的输入控制输入​​数字.无法在您的文档中更改此设置，除非您可以使用属性来指定范围和精度.因此，浏览器可以接受 38 1/2 并在内部将其转换为 38.5，但是没有办法说它应该，更不用说强制它这样做了.此外，数字的内部格式(传递给服务器)是严格定义的；例如，它不能是 38 1/2.

The <input type="number"> element is defined to create a browser-dependent browser-locale-dependent input control for entering numbers. There is no way to change this in your document, except in the sense that you can use attributes to specify the range and precision. So a browser could accept 38 1/2 and convert it internally to 38.5, but there is no way to say that it should, still less force it to do so. Moreover, the internal format of the numbers (as passed to the server) is defined strictly; it cannot be 38 1/2 for example.

所以你需要使用纯文本输入或一些特殊的小部件(用 JavaScript 编程).您可以使用 pattern 属性以某种方式指定允许的格式，至少是允许的字符集；这可能会也可能不会影响触摸设备上显示的屏幕键盘(对于当前设备可能不会).

So you need to use plain text input or some special widget (programmed in JavaScript). You can use the pattern attribute to specify the allowed format somehow, at least the allowed set of characters; this may or may not affect the on-screen keyboard displayed on touch devices (it probably won’t, for current devices).

这篇关于允许在 HTML5 数字输入中使用特殊字符/分数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！