如何处理具有输入类型数的浮点和十进制分隔符 html5

我创建一个主要用于移动浏览器的Web应用程序。我使用数字类型的输入字段，所以 /最多/ 移动浏览器仅拨打一个数字键盘以获得更好的用户体验。此Web应用程序主要用于十进制分隔符 - 逗号，而不是一个点的区域中，因此我需要处理双十进制分隔符。

如何涵盖所有这些混乱点和逗号？

我的结论：

表铬

输入类型=数字

用户进入 "4,55" 在输入字段中

$/"#my_input"/.val//;

回报 "455"

我无法从输入中获得正确的值

桌面 Firefox

输入类型=数字

用户进入 "4,55" 在输入字段中

$/"#my_input"/.val//;

回报 "4,55"

没关系，我可以取代逗号点并获得右浮动

Android 浏览器

输入类型=数字

用户进入 "4,55" 在输入字段中

当输入数据丢失焦点时，该值被截断到 "4"

让用户困惑

Windows Phone 8

输入类型=数字

用户进入 "4,55" 在输入字段中

$/"#my_input"/.val//;

回报 "4,55"

没关系，我可以取代逗号点并获得右浮动

什么 "best practices" 在用户可以使用逗号或点作为十进制分隔符的情况下，我想保存输入的类型 html 作为一个保证最佳用户体验的数字？

我可以将逗号转换为这一点 "在飞行", 绑定关键事件，它是否使用数字输入？

EDIT

Currently 我没有解决方法如何获得价值 float /以字符串或数字的形式/ 从输入数据，安装在其中的类型 number. 如果最终用户进入 "4,55", 镀铬返回 "455", "4,55" Firefox 返回，它很好。

也很烦人 Android /测试仿真器 4.2/, 当我进入时 "4,55" 在输入字段中并将焦点更改为其他内容，输入的号码被截断到 "4".

已邀请:

10 个回复

詹大官人

赞同来自:

我认为，在上面的答案中，无需为该属性指定不同的值

step

, 默认值

. 如果要允许输入验证算法允许浮点值，请指定相应的步骤。

例如，我需要美元的金额，所以我指定了这样的步骤：

<input name="price" pattern="[0-9]+/[\.,][0-9]+/?" step="0.01" title="This should be a number with up to 2 decimal places." type="number"/>

使用中没有任何糟糕 jQuery 要获得一个值，但您会发现使用很有用 DOM API 直接获得属性

validity.valid

元素。

我的小数点有一个类似的问题，但我意识到这是一个问题的原因是造型 Twitter Bootstrap 添加到具有无效值的输入编号。

这里 fiddle, 演示添加属性

step

强制它工作，以及检查当前值是允许的：

http://jsfiddle.net/natchiketa/xrujZ/16/

TL;DR:

安装属性 a

step

在浮点值，因为它等于默认值

.

NOTE

: 逗号不适合我，但我怀疑如果我设置了我的语言设置/地区 OS 在逗号用作小数分子分隔符的地方，它将起作用。 *note 在 note*: 这不是如此 OS 语言 / 键盘设置 *German* 在 Ubuntu / Gnome 14.04.

卫东

赞同来自:

依据 w3.org 属性

value

http://www.w3.org/TR/html-mark ... umber
定义为数字
http://www.w3.org/TR/html-mark ... float
. 显然，浮点的语法仅作为小数分隔符。

下面我列出了几种对您有用的选项：

1. 使用属性 pattern

使用属性
http://www.w3.org/TR/html5/for ... ibute
您可以使用正则表达式兼容的方式指定允许的格式。 HTML5. 在这里，您可以指定允许逗号符号，以及如果模板不起作用，则有用的反馈消息。

<input name="my-num" pattern="[0-9]+/[,\.][0-9]+/?" title="The number input must start with a number and use either comma or a dot as a decimal character." type="number">

笔记：

Crossbox浏览器支持极大变化。它可以完整，部分或不存在..

2. 查看 JavaScript

您可以尝试将简单的回调绑定到事件。

onchange

/and/or

blur

/, 这将取代逗号，或者将所有内容一起取代。

3. 禁用浏览器检查 ##

第三，你可以尝试使用
http://www.w3.org/TR/html5/for ... idate
属性 formnovalidate 在数字输入上，打算禁用浏览器检查此字段的浏览器。

<input formnovalidate="" type="number"/>

4. 组合 ..？

<input formnovalidate="" name="my-num" pattern="[0-9]+/[,\.][0-9]+/?" title="The number input must start with a number and use either comma or a dot as a decimal character." type="number"/>

</input>

小明明

赞同来自:

使用十进制分隔符的逗号或点是否完全取决于浏览器。浏览器基于以下方式接受此解决方案 locale 操作系统或浏览器，或某些浏览器从网站上获取提示。我做了
https://www.ctrl.blog/entry/ht ... .html
, 显示不同的浏览器如何支持各种本地化方法。 Safari - 唯一可以互换处理逗号和点的浏览器。

原则上，你是一个网络作者，无法真正控制它。一些解决方法包括使用两个包含整数的输入字段。这允许每个用户在您期望时输入数据。它不是特别性感，但它将在每种情况下工作。

龙天

赞同来自:

使用
http://www.w3.org/TR/2011/WD-h ... umber
反而

.val//

.

输入。 valueAsNumber [ = 价值 ]

返回表示表单控制值的数字（如果适用）; 否则退货 null.

您可以设置为更改值。

创造一个例外 INVALID_STATE_ERR, 如果控件不基于日期，也不按时或在数字上。

裸奔

赞同来自:

使用文本类型，但强制使用数字键盘的外观

<input inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+" type="text" value="12,4"/>

标签 inputmode - 这是一个解决方案

董宝中

赞同来自:

我没有找到完美的解决方案，但我能做的最好的事情就是用它 type="tel" 并禁用检查 html5 /formnovalidate/:

<input formnovalidate="formnovalidate" name="txtTest" type="tel" value="1,200.00">

如果用户置于逗号，则将在我尝试的每个现代浏览器中概述 /最新版本 FF, IE, edge, opera, chrome, safari desktop, android chrome/.

主要问题如下：

移动用户将看到他们的电话键盘可能有所不同
来自数字键盘。

更糟糕的是，手机键盘上可能没有逗号的钥匙。

对于我的使用，我只需要：

通过逗号输出初始值 /firefox 罢工
type=number/

未执行验证 html5 /如果你是逗号/

让领域完全作为入口读取 /有可能的半醇/

如果您有类似的要求，它应该为您工作。

笔记：

我不喜欢这个属性的支持 pattern. Formalidat似乎工作得多。
</input>

涵秋

赞同来自:

您打电话的时候

$/"#my_input"/.val//;

, 它作为字符串变量返回。因此，使用

parseFloat

和

parseInt

转换。
当你使用时

parseFloat

, 您的桌面或电话

ITSELF

了解变量的值。

此外，您可以转换 float 在 string 通过

toFixed

, 其中有一个数字数量，如下所示：

var i = 0.011;

var ss = i.toFixed/2/; //It returns 0.01

帅驴

赞同来自:

显然，浏览器仍然存在问题 /虽然 Chrome 和 Firefox Nightly 完美覆盖/.
我对真正使用数字字段的人有一个黑客方法 /可能因为没有文本字段的小箭头/.

我的决定

我添加了事件处理程序

keyup

到表单数据的输入，一旦再次有效，就会行进状态并设置该值。

纯的 JavaScript 分段
https://jsfiddle.net/gu4th0oq/25/

var currentString = '';

var badState = false;

var lastCharacter = null;



document.getElementById/"field"/.addEventListener/"keyup",/$event/ => {

 if /$event.target.value && !$event.target.validity.badInput/ {

 currentString = $event.target.value;

 } else if /$event.target.validity.badInput/ {

 if /badState && lastCharacter && lastCharacter.match//[\.,]// && !isNaN/+$event.key// {

 $event.target.value = //+currentString/ + /+$event.key / 10//;

 badState = false;

 } else {

 badState = true;

 }

 }

 document.getElementById/"number"/.textContent = $event.target.value;

 lastCharacter = $event.key;

}/;



document.getElementById/"field"/.addEventListener/"blur",/$event/ => {

 if /badState/ {

 $event.target.value = /+currentString/;

 badState = false;

 document.getElementById/"number"/.textContent = $event.target.value;

 }

}/;

#result{

 padding: 10px;

 background-color: orange;

 font-size: 25px;

 width: 400px;

 margin-top: 10px;

 display: inline-block;

}



#field{

 padding: 5px;

 border-radius: 5px;

 border: 1px solid grey;

 width: 400px;

}

<input id="field" keyup="keyUpFunction" placeholder="Field for both comma separators" step="0.01" type="number"/>

<span id="result">

<span>Current value: </span>

<span id="number"></span>

</span>

Angular 9 分段

@Directive/{

 selector: '[appFloatHelper]'

}/

export class FloatHelperDirective {

 private currentString = '';

 private badState = false;

 private lastCharacter: string = null;



 @HostListener/"blur", ['$event']/ onBlur/event/ {

 if /this.badState/ {

 this.model.update.emit//+this.currentString//;

 this.badState = false;

 }

 }



 constructor/private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel/ {

 this.renderer.listen/this.el.nativeElement, 'keyup', /e: KeyboardEvent/ => {

 if /el.nativeElement.value && !el.nativeElement.validity.badInput/ {

 this.currentString = el.nativeElement.value;

 } else if /el.nativeElement.validity.badInput/ {

 if /this.badState && this.lastCharacter && this.lastCharacter.match//[\.,]// && !isNaN/+e.key// {

 model.update.emit//+this.currentString/ + /+e.key / 10//;

 el.nativeElement.value = /+this.currentString/ + /+e.key / 10/;

 this.badState = false;

 } else {

 this.badState = true;

 }

 } 

 this.lastCharacter = e.key;

 }/;

 }

 

}

<input [="" ]="numberModel" appfloathelper="" matinput="" ngmodel="" placeholder="Field for both comma separators" type="number"/>

快网

赞同来自:

看起来你想使用 toLocaleString// 在他们的数字输入上。

厘米
https://developer.mozilla.org/ ... tring
用它。

数字B的定位。 JS 也覆盖
https://coderoad.ru/8906567/

二哥

赞同来自:

我的建议？不使用 jQuery 一般来说。我和你一样的问题。我发现

$/'#my_input'/.val//

总是返回某种奇怪的结果。

尝试使用

document.getElementById/'my_input'/.valueAsNumber

反而

$/"#my_input"/.val//;

, 然后使用

Number/your_value_retrieved/

, 尝试创建一个数字。如果值相等 NaN, 你可能知道这不是一个数字。

要添加的一件事是，当您在入口处编写数字时，输入实际上几乎采用了任何字符 /我可以编写欧元，美元和所有其他特殊角色的标志/, 因此，最好有一个价值

.valueAsNumber

, 不使用 jQuery.

哦，和 BTW, 这允许您的用户添加国际化 /即，支持逗号而不是要创建十进制数字/. 只是允许对象

Number//

为你创造一些东西，它会说，小数和安全。

要回复问题请先登录或注册

如何处理具有输入类型数的浮点和十进制分隔符 html5

10 个回复

发起人

相关问题

问题状态

如何处理具有输入类型数的浮点和十进制分隔符 html5

与内容相关的链接

10 个回复

发起人

相关问题

问题状态