AngularJS 数字输入格式化视图 [英] AngularJS number input formatted view

问题描述

我想使用格式化的数字输入在用户键入大数字时向用户显示千个分隔符点.这是我使用的指令代码:http://jsfiddle.net/LCZfd/3/

I want to use a formatted number input to show thousand seperator dots to user when he types big numbers. Here is the directive code that I used: http://jsfiddle.net/LCZfd/3/

当我使用 input type="text" 时，它可以工作，但是当我想使用 input type="number" 时，当用户输入大字时，它会奇怪地清理数字.

When I use input type="text" it works, but when I want to use input type="number" it's weirdly cleaning by something when user typing big numbers.

input[number] 有什么问题?

推荐答案

如评论中所写，input type="number" 除了数字、小数点分隔符(通常是 、 或 . 取决于语言环境)和 - 或 e.您仍然可以输入任何您想要的内容，但浏览器会丢弃任何未知/不正确的字符.

As written in the comments, input type="number" doesn't support anything but digits, a decimal separator (usually , or . depending on the locale) and - or e. You may still enter whatever you want, but the browser will discard any unknown / incorrect character.

这给您留下了两个选项:

This leaves you with 2 options:

• 使用 type="text" 和模式验证，如 pattern="[0-9]+([\.,][0-9]+)*" 限制用户在自动格式化值时可能输入的内容，就像您在 您的示例中所做的那样.
• 在输入字段的顶部放置一个叠加层，以您想要的方式呈现数字，并且仍然允许用户使用自定义 type="number" 输入控件，例如 此处演示.

• Use type="text" and pattern validation like pattern="[0-9]+([\.,][0-9]+)*" to limit what the user may enter while automatically formatting the value as you do in your example.
• Put an overlay on top of the input field that renders the numbers how you want and still allows the user to use the custom type="number" input controls, like demonstrated here.

后一种解决方案使用一个额外的 标签，该标签包含当前值，并在您聚焦输入字段时通过 CSS 隐藏.

The latter solution uses an additional <label> tag that contains the current value and is hidden via CSS when you focus the input field.

这篇关于AngularJS 数字输入格式化视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！