iOS5 默认显示数字小键盘,不使用 type="numbe

iOS5 show numeric keypad by default without using type=quot;numberquot; or type=quot;telquot;(iOS5 默认显示数字小键盘,不使用 type=number;或类型=“电话;)

本文介绍了iOS5 默认显示数字小键盘,不使用 type="number";或类型=“电话";的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

随着 iOS5 的发布,Apple 为 input type="number" 表单字段添加了自己的验证.这导致了一些问题;请参阅下面的问题总结:

With the release of iOS5, Apple has added their own validation to input type="number" form fields. This is causing some issues; see this question below which sums it up:

输入类型='number' 新验证删除了 Safari for iPhone iOS5 和最新 Safari for Mac 中的前导零和格式数字

虽然 input type="tel" 可以在 iphone 上调出数字小键盘,但它是 电话小键盘,没有小数点.

Although input type="tel" works to bring up a numeric keypad on the iphone, it's the telephone keypad which has no decimal points.

有没有办法使用 html/js 将数字键盘设置为默认值?这不是一个 iphone 应用程序.至少我需要键盘中的数字和小数点.

Is there a way to set the numeric keypad as default using html/js? This not an iphone app. At minimum I need numbers and a decimal point in the keypad.

更新

Safari 5.1/iOS 5 中的数字输入字段只接受数字和小数点.我的一项输入的默认值为 $500,000.这导致 Safari 显示空白输入字段,因为 $ 、 % 是无效字符.

Number input fields in Safari 5.1/iOS 5 only accept digits and decimal points. The default value for one of my inputs is $500,000. This is resulting in Safari showing a blank input field because $ , % are invalid characters.

此外,当我运行自己的验证 onblur 时,Safari 会清除输入字段,因为我在值中添加了 $.

Furthermore, when I run my own validation onblur, Safari clears the input field because I'm adding a $ to the value.

因此 Safari 5.1/iOS5 的 input type="number" 实现使其无法使用.

Thus Safari 5.1/iOS5's implementation of input type="number" has rendered it unusable.

jsfiddle

在这里试试 - http://jsfiddle.net/mjcookson/4ePeE/ 默认500,000 美元的价值不会出现在 Safari 5.1 中,但如果您删除 $ 和 , 符号,它会出现.令人沮丧.

Try it here - http://jsfiddle.net/mjcookson/4ePeE/ The default value of $500,000 won't appear in Safari 5.1, but if you remove the $ and , symbols, it will. Frustrating.

推荐答案

工作解决方案:在 iPhone 5、Android 2.3、4 上测试

Tadeck 的解决方案(赏金赢家)使用 <span> 包含输入字段符号并将格式化的 <span> 放在货币输入的顶部基本上就是我最终做的事情.

Working solution: Tested on iPhone 5, Android 2.3, 4

Tadeck's solution (bounty winner) of using a <span> to contain the input field symbols and place a formatted <span> on top of the currency input is essentially what I ended up doing.

我的最终代码不同且更短,因此我将其发布在这里.此解决方案解决了 iOS5 输入字段中 $ 、 % 符号的验证问题,因此默认可以使用 input type="number".

My final code is different and shorter however so I'm posting it here. This solution resolves the iOS5 validation issue of $ , % symbols inside input fields and so input type="number" can be used by default.

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>

  • 只需使用数字输入字段和输入外的 span 即可显示符号.
  • <span id="formatted-currency">$500,000</span>
    <input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />
    

    • 将跨度放置在货币输入的顶部并将输入设置为显示:无
    • 当用户点击/点击跨度时,隐藏跨度并显示输入.如果您完美定位跨度,则过渡是无缝的.
    • 数字输入类型负责验证.
    • 在输入模糊和提交时,将 span html 设置为输入的价值.格式化跨度.隐藏输入并使用格式化的值.
    • $('#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();
      

      这篇关于iOS5 默认显示数字小键盘,不使用 type="number";或类型=“电话";的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:iOS5 默认显示数字小键盘,不使用 type="numbe

基础教程推荐