如何使html5文本字段显示数字键盘？

Question

的PhoneGap＆GT;机器人

我知道我可以使用type="number"来显示数字键盘，但问题是我想将输入重新格式化为用户键入的价格。所以它将采用美元和美分的格式（如$343,23.50）和type="number"字段不允许使用除数字字符以外的字段。

所以我想要一个文本字段，但它应该显示数字键盘。有可能吗？

Answer 1

对于全包解决方案，我认为除非你使用type =“text”并使用onchange格式函数，否则你运气不好。但是，您可以使用如下所示的数字字段，它将为您提供两位小数，然后将美元符号放在输入字段的前面。

<div>$<input type="number" step="0.01"/></div>

Answer 2

对于Android，您通常需要type="number"来默认使用数字键盘。 （有些人会根据iPhone的价值来解决这个问题。）在键入时，无法在type="number"中显示非数字。要在键入时显示，您需要type="text"，然后您可以使用现有插件（如autoNumeric）在键入时进行格式化，但随后您将继续按下默认为非数字键盘，通常在每个按键上。

您的最佳解决方案可能是type="number"进行编辑并切换到type="text"或其他字段，以便在字段没有焦点或同时显示格式。和/或，您可以检测浏览器是否在具有默认键盘问题的设备上，如果没有，您可以继续使用type="text"并在进行时格式化。我见过的其他解决方法是微调器（不适用于信用卡这样的大数字）或带有伪键盘的小部件。

如果不恰当的话，我最近完成了一个type="number"插件，以帮助解决type="number" Android问题，并将网站放在一起分享。很高兴将URL私有转发给您，（插件可下载并且API已详细记录）但我不想在此处发布该网站，直到我完成了页面的设置。当它准备好包含URL时，很高兴回来编辑这个答案。

Answer 3

type =“number”的问题是所有浏览器都无法识别。

您可以使用输入掩码来设置帖子的格式 有几个插件可以做到这一点 对于您的问题，maskMoney看起来合适。

Answer 4

我正在使用Jquery，试试这个，我编写的方式是在点击文本字段时它会显示数字键盘，你可以根据需要进行修改

<强>代码：

<input id="phone" placeholder="Phone Number" name="phoneno" type="tel" value="" ></input>

使用下拉列表，如美元，电话索引号+91等所需字符，

Example