iOS5默认显示数字键盘，而不使用type="number“或type="tel”
随着iOS5的发布，苹果在输入type="number“表单字段时添加了自己的验证。这引起了一些问题；参见下面这个问题，总结如下：
输入类型=‘number’新验证移除用于iPhone iOS5的Safari和用于Mac的最新Safari中的前导零和格式号
虽然输入type="tel“可以在iphone上打开一个数字键盘，但是没有小数点的是电话键盘。
是否有一种方法可以使用html/js将数字键盘设置为默认值？这不是iphone应用程序。至少我需要数字和小数点在键盘上。
更新
Safari 5.1/iOS 5中的数字输入字段只接受数字和小数点。我的一个输入的默认值是500,000美元。这会导致Safari显示一个空白输入字段，因为$，%是无效字符。
此外，当我运行自己的验证onblur时，Safari会清除输入字段，因为我要在值中添加$。
因此，Safari5.1/iOS5 5的输入type="number“的实现使得它无法使用。
jsfiddle
在这里试试-- http://jsfiddle.net/mjcookson/4ePeE/ $500,000的默认值不会出现在Safari5.1中，但是如果您删除$ and，符号，它就会出现。令人沮丧。
回答 11
Stack Overflow用户
发布于 2013-03-19 01:39:16
工作解决方案:在iPhone 5，Android2.3，4上进行测试
Tadeck的解决方案(赏金优胜者)使用<span>来包含输入字段符号，并在货币输入的基础上放置格式化的<span>，这基本上是我最后所做的。
然而，我的最后一段代码是不同的和更短的，所以我在这里发布它。此解决方案解决了输入字段中的$、%符号的iOS5验证问题，因此默认情况下可以使用input type="number"。
符号字段如"xx %“"xx年”
<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>- 只需使用数字输入字段和输入外部的跨度来显示符号。
货币领域如"$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" />- 将span放在货币输入的顶部，并将输入设置为display:none
- 当用户单击/点击span时，隐藏span并显示输入。如果你把跨度定位得很完美，那么过渡是无缝的。
- 数字输入类型负责验证。
- 在输入的模糊和提交上，将span html设置为输入的值。格式化跨度。隐藏输入并使用格式化的值显示span。
$('#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();Stack Overflow用户
发布于 2011-11-27 23:31:09
将字段的样式设置为包含符号
当涉及到在此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;
}把它当作概念的证明。有关活生生的示例，请参见这弹琴。在Chrome看来是这样的：
定义较小的粒度
基于关于数字输入的文件(编辑草稿)，要定义粒度，需要将step="<some-floating-point-number>"属性添加到<input>标记中：
<input type="number" name="number" value="500.01" step="0.01" />它将在许多现代浏览器中工作。有关测试，请参见这弹琴。
结论
你应该能够把它的样式设计成包含你需要的符号。根据文档，还有一个特性可以支持浮点数.
替代解决方案-在其他东西前面的空字段
您还可以通过欺骗某人，让他相信他看到了输入字段的内容，但在字段后面给他看了其他东西(这是我原来解决方案的一些扩展)。然后，如果有人敲击字段，您可以传播适当的值等，然后返回到以前的状态在模糊。请参阅此代码(小提琴活生生的例子 -蓝色表示您正在查看的内容不在该字段中)：
// 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上)。代码需要缩短和清理，但它是概念的证明。请试一试，分享你的发现。
Stack Overflow用户
发布于 2011-11-27 23:18:43
为什么不将$放在输入字段之外(作为标签)。还是输入字段右边的百分比符号？这似乎解决了您的问题，您将能够使用输入type=“数字”，它只会工作。
https://stackoverflow.com/questions/8222528
复制相似问题
腾讯云开发者
