默认情况下,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中,但是如果你删除了$和$符号,它会的。 令人沮丧。

11 Solutions collect form web for “默认情况下,iOS5显示数字键盘,而不使用type =“number”或type =“tel””

造型字段以包含符号

当涉及到在这个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/编辑)&#x3002;

 <!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="" /> ,我得到的键盘与数字,而不是电话键盘。 你也可以把主导价值放在价值上,他们已经在那里了。

  • 有没有办法实例化NSManagedObject而不插入它?
  • 如何调整UISwitch?
  • 如何更改UILabel / UIFont的字母间距?
  • 如何在iPhone模拟器中安装iPhone应用程序
  • iOS WebView远程HTML与本地图像文件
  • Web应用程序如何将推送通知发送到iOS设备?
  • 修复UIPickerView的select栏中的标签
  • Xcode 6 gitignore文件应包含哪些内容?
  • 在iPhone上测量人类肠胃气胀传播波包
  • 使用CALayer委托
  • 你如何监测iPhone上的networkingstream量?