默认情况下，iOS5显示数字键盘，而不使用type =“number”或type =“tel”
随着iOS5的发布，苹果已经添加了自己的validationinputtype =“number”表单字段。 这是造成一些问题; 看到下面这个问题总结：
inputtypes='数字'新的validation删除前导零和格式编号在Safari浏览器为iPhone iOS5和最新的Safari的Mac
虽然inputtypes=“电话”的作品，在iPhone上popup一个数字键盘，这是没有小数点的电话键盘 。
有没有办法将数字键盘设置为默认使用HTML / JS？ 这不是一个iPhone应用程序。 至less我需要在键盘上的数字和小数点。
更新
Safari 5.1 / iOS 5中的数字input字段只接受数字和小数点。 我的一个input的默认值是$ 500,000 。 这导致Safari显示空白input字段，因为$，％是无效字符。
此外，当我运行我自己的validationonblur ，Safari会清除input字段，因为我将值添加到$。
因此，Safari 5.1 / iOS5的inputtypes=“数字”的实现使其不可用。
的jsfiddle
在这里试试 – http://jsfiddle.net/mjcookson/4ePeE/ $ 500,000的默认值不会出现在Safari 5.1中，但是如果你删除了$和$符号，它会的。 令人沮丧。
造型字段以包含符号
当涉及到在这个number字段中的符号，你可以使用一些像这样的解决方法：
HTML：
<span id="number-container"> <input type="number" name="number" id="number-field" value="500" /> <span id="number-container-symbol">$</span> </span>
CSS：
#number-container { position: relative; } #number-container-symbol { left: 5pt; position: absolute; top: 0px; } #number-field { background-color: transparent; padding-left: 10pt; }
把它当作概念certificate。 看到这个jsfiddle的生动的例子。 它看起来像在Chrome中：
定义更小的粒度
根据编号input文档（Editor's Draft） ，为了定义粒度 ，需要在<input>标签中添加step="<some-floating-point-number>"属性：
<input type="number" name="number" value="500.01" step="0.01" />
它将在许多现代浏览器中工作。 看到这个jsfiddle进行testing。
结论
您应该能够将其设置为包含您需要的符号。 根据文档，还有一个function支持浮点数。
替代解决scheme – 在别的东西前面的空白领域
你也可以欺骗某人相信自己正在看到input字段的内容 ，但却向他展示了其他东西（这是我原来的解决scheme的一些扩展）。 然后，如果有人点击领域，你可以传播适当的价值等，然后回到以前的状态模糊。 看到这个代码（ 在jsfiddle上的生动的例子 – 蓝色意味着你正在看的东西是不是在该领域）：
// store original value from INPUT tag in jQuery's .data() var input_field = jQuery('#number-field'); var display_span = jQuery('#number-container-value'); var base_val = parseFloat(input_field.val()); input_field.data('storedVal', base_val); input_field.val(''); display_span.html(base_val); // react to field gaining and losing focus jQuery('#number-field').on('focus', function(event){ var el = jQuery(this); var display = jQuery('#number-container-value'); if (typeof el.data('storedVal') != 'undefined'){ el.val(el.data('storedVal')); }; display.html(''); }).on('blur', function(event){ var el = jQuery(this); var display = jQuery('#number-container-value'); var new_val = parseFloat(el.val()); el.data('storedVal', new_val); display.html(new_val); el.val(''); });
（完整的代码样式是在提到的jsfiddle）。 代码需要缩短和清理，但这是一个概念的certificate 。 试试看，分享你的发现，请。
为什么不把$放在input字段之外（作为标签）。 或input字段右侧的百分号？ 似乎这样可以解决你的问题，你可以使用inputtypes=“数字”，它只是工作。
你被困在一块坚硬的地方。 除非在HTML规范中有type="currency" （并且可能永远不会发生不同国家/地区使用不同币种币种的方式），你将不得不使用一些JS魔法来解决这个问题。
当然数字和电话不会是最好的主意，但是通过使用一些JS狡猾我已经想出了这个解决scheme：
var i = document.getElementById( 'input' ); i.onblur = function() { i.type = 'text'; i.value = number_format( i.value ); } i.onfocus = function() { var v = Number( i.value.replace( /\D/, '' ) ); i.type = 'number'; i.value = v > 0 ? v : ''; }
只要我根据焦点/模糊交换input的types，这意味着一旦用户离开文本字段，我们可以格式化它的屁股。 当用户返回时，我们取值，如果有一个> 0，我们把它作为一个数字。 这是工作testing，我希望它可以帮助： http : //jsfiddle.net/ahmednuaman/uzYQA/
下面的代码popupiPad的数字键盘和iOS5，允许键入任何字符，并允许设置任何值：
<input type="text" pattern="\d*">
然而，这是丑陋的，脆弱的（可能会打破未来…），并不适用于iPhone（iPhone显示数字键盘，只允许0至9）。 该解决scheme似乎只能使用模式\d*或其等价的[0-9]* 。
也许更好使用type="tel"这似乎是相同的。
工作解决scheme：testingiPhone 5，Android 2.3,4
使用<span>包含input字段符号并在货币input之上放置格式化的<span> Tadeck解决scheme（赏金获胜者）本质上是我最终做的。
我的最终代码是不同的，但更短，所以我在这里发布。 此解决scheme解决了input字段中$，％符号的iOS5validation问题，因此默认情况下可以使用input type="number" 。
符号字段例如。 “xx％”“xx年”
<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" /> <span class="symbol">%</span>
- 只需使用数字input字段和input外部的跨度来显示符号。
货币字段例如。 “$ XXX，XXX”
<span id="formatted-currency">$500,000</span> <input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />
- 将跨度放在货币input的顶部，并将input设置为显示：无
- 当用户单击/轻敲跨度时，隐藏跨度并显示input。 如果您完美地定位跨度，那么过渡是无缝的。
- 数字inputtypes负责validation。
- 在input模糊和提交时，将span html设置为input的值。 格式化跨度。 隐藏input并用格式化的值显示范围。
$('#formatted-currency').click(function(){ $(this).hide(); $('#currency-field').show().focus(); }); $('#currency-field').blur(function(){ $('#formatted-currency').html(this.value); $('#formatted-currency').formatCurrency({ roundToDecimalPlace : -2 }); $(this).hide(); $('#formatted-currency').show(); }); // on submit $('#formatted-currency').html($('#currency-field').val()); $('#formatted-currency').formatCurrency({ roundToDecimalPlace : -2 }); $('#currency-field').hide(); $('#formatted-currency').show();
我有类似的问题，并提出了这个死的丑陋的JS解决scheme，迫使iPadpopup数字键盘。
我的问题是Safari浏览器在发布表单时会过滤除数字以外的所有内容，而我需要各种额外的字符，例如“3/7”或“65 $”。
var elem = document.getElementById('MathAnswer'); elem.type = 'number'; elem.onfocus = function() { setTimeout(function() { elem.type = 'text'; }, 1); };
它只是在 iPad显示数字键盘后将inputtypes设置为“文本”，而瞧，Safari不再删除任何非数字。
希望它可以帮助别人！
iPhone的问题可能还有其他解决方法：
<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />
这会在input获得焦点时将types更改为数字（以便数字键盘显示），然后将types更改为文本，以便可以编辑正确的值。
让它工作可靠可能是困难的，例如，当前的触摸input，但然后滑动手指closures控制离开它作为types=数字，我想不出一种方法来检测键盘上的下一步button，除其他问题。
这个解决scheme适用于iPad和iPhone，甚至“下一个/上一个”工作。 尝试http://fiddle.jshell.net/L77Cq/2/show/ （或http://jsfiddle.net/L77Cq/编辑）。;
<!DOCTYPE html> <head> <style> .riggedinput::-webkit-input-placeholder { margin: 0em; font: -webkit-small-control; color: initial; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0px; text-shadow: none; } </style> <script> function focused() { var test = document.getElementById('test'); setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons if (document.activeElement === test) { test.type = 'text'; test.value = test.placeholder; test.placeholder = ''; } }, 1); } function blurred() { var test = document.getElementById('test'); var value = test.value; test.placeholder = value; test.value = ''; test.type = 'number'; } if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert ('Code specific to Mobile Safari'); </script> </head> <body> <input> <input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()"> <input> </body>
它仍然有以下问题：*如果使用表单，需要将值复制到隐藏字段。 *出于某种原因页面滚动滑稽（iPhone地址栏隐藏，iPaddebugging控制台隐藏）。
PS：我发现这个技术独立于上面的Ahmed Nuaman的评论（我曾试过，现在注意到他的评论 – arrrgh！）。
如果Safari支持input元素的HTML5“inputmode”属性，则问题将得到解决。 没有人知道是否或什么时候会发生。 同时这个链接提供了一些有趣的阅读。
我们最终使用了一个hacky的解决scheme来使数字和编辑键盘能够显示在iPhone上工作的焦点，我们logging按键并模拟这个值。
https://output.jsbin.com/necuzoj/quiet
（1）数字键盘没有显示100％的时间，（2）如果一个表单比这个时间更长，然后自动滚动以显示焦点input被完全填满（有时候，焦点input将在屏幕外或在虚拟键盘下）。
显示数字键盘（例如type=tel ）不允许input小数点或冒号。
在iPad上，您可以使用<input type=text pattern=[0-9]*>来显示数字和指令键盘，但是该解决scheme对iPhone不起作用（iPhone会显示没有小数点的数字键盘）。
我只是使用像<input type="number" name="job_order_id" maxlength="7" size="10px" value="" /> ，我得到的键盘与数字，而不是电话键盘。 你也可以把主导价值放在价值上，他们已经在那里了。
