默认情况下，iOS5显示数字小键盘，而不使用type =“number”或键入=“tel” [英] iOS5 show numeric keypad by default without using type="number" or type="tel"

问题描述

随着iOS5的发布，Apple将自己的验证添加到输入type =number表单字段中。这造成了一些问题;看到下面的这个问题，总结它：

虽然输入类型=tel可以调出iphone上的数字键盘，但电话键盘没有小数点。

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

更新

Safari 5.1 / iOS 5中的数字输入字段仅接受数字和小数点。其中一个输入的默认值为 $ 500,000 。这导致Safari显示空白输入字段，因为$，％是无效字符。

另外，当我运行我自己的验证 onblur 时， code>，Safari会清除输入字段，因为我将值添加到$。
$ b

因此，Safari 5.1 / iOS5的输入类型=number已使其无法使用。

jsfiddle

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

解决方案

工作解决方案：测试iPhone 5，Android 2.3,4 /

使用< span> 来包含输入字段符号并放置格式为< span>的tadeck解决方案在货币输入之上基本上就是我最终做的事情。

我的最终代码不同而且更短但是我发布了它这里。此解决方案解决了输入字段中的$，％符号的iOS5验证问题，因此可以默认使用 input type =number。

符号字段例如。 xx％xx年

 < input name =interest-ratevalue =6.4maxlength = 4min =1max =20/> 
< span class =symbol>％< / span> 
  

• 只需使用数字输入字段和输入外的范围即可显示符号。

货币字段例如。 $ xxx，xxx

 < span id =formatted-currency> $ 500,000< / span> 
< input id =currency-fieldtype =numbername =loan-amountvalue =500000maxlength =8min =15000max =10000000/> 
  

• 将范围放在货币输入的顶部并将输入设置为
  display：none


• 当用户点击/轻敲跨度时，隐藏跨度并显示
  输入。如果您完美地定位跨度，则转换是无缝的。


• 数字输入类型负责验证。


• 关于模糊和提交输入，将span html设置为输入的
  值。格式化跨度。隐藏输入并使用
  格式化值显示范围。

  $（'#formatforma-currency'）。click（function（）{
 $（this）.hide（）; 
 $（'＃ currency-field'）。show（）。focus（）; 
}）; 
 $（'＃currency-field'）。blur（function（）{
 $（'#formatforma-currency'）。html（this.value）; 
 $（'#format ）; $ b $（this）.hide（）; 
 $（'＃formatted-currency'）。formatCurrency（{
 roundToDecimalPlace：-2 
}）; 
 $ show（）; 
}）; 
 //提交
 $（'#formatforma-currency'）。html（$（'＃currency-field'）。val（））; 
 $（'#formatforma-currency'）。formatCurrency（{
 roundToDecimalPlace：-2 
}）; 
 $（'＃currency-field'）。hide（）; 
 $（'＃formatted-currency'）。show（）; 
  

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:

Input type='number' new validation removes leading zeros and formats number in Safari for iPhone iOS5 and latest Safari for Mac

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

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.

Update

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.

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

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

jsfiddle

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.

解决方案

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.

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.

Symbol field eg. "xx %" "xx years"

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

• Simply use a number input field and a span outside the input to display the symbol.

Currency field eg. "$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" />

• Position the span on top of the currency input and set the input to display:none
• When a user clicks/taps on the span, hide the span and show the input. If you position the span perfectly the transition is seamless.
• The number input type takes care of the validation.
• On blur and submit of the input, set the span html to be the input's value. Format the span. Hide the input and show the span with the formatted value.

$('#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”或键入=“tel”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！