iOS5 默认显示数字小键盘，不使用 type="number";或类型=“电话"； [英] iOS5 show numeric keypad by default without using type="number" or type="tel"

问题描述

随着 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";或类型=“电话"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！