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

Question

随着iOS5的发布,Apple已将自己的验证添加到input type ="number"表单字段中.这引起了一些问题; 看下面这个总结的问题:

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

虽然输入类型="tel"用于在iphone上调出数字小键盘,但它是没有小数点的电话键盘.

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

更新

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

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

因此,Safari 5.1/iOS5的输入类型="数字"的实现使其无法使用.

的jsfiddle

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

Answer 1

样式字段包含符号

在此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;
}

将其视为概念证明.有关实例,请参阅此jsfiddle.在Chrome中看起来像这样:

定义更小的粒度

根据数字输入(编辑草案)的文档,要定义粒度,您需要向标记添加step="<some-floating-point-number>"属性<input>:

<input type="number" name="number" value="500.01" step="0.01" />

它将适用于许多现代浏览器.请参阅此jsfiddle以获取测试.

结论

您应该能够将其设置为包含所需的符号.根据文档,还有一个功能可以支持浮点数.

替代解决方案 - 在其他事物面前的空场

你也可以欺骗别人相信他正在看到输入字段的内容,但是向他展示了该字段背后的其他内容(这是我原始解决方案的一些扩展).然后,如果有人点击该字段,您可以传播正确的值等,然后返回到模糊的先前状态.请参阅此代码(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上).代码需要缩短和清理,但这是一个概念证明.请尝试并分享您的发现.

Answer 2

为什么不将$放在输入字段之外(作为标签).或输入字段右侧的百分号？似乎这样可以解决您的问题,您可以使用输入类型="数字",它只是工作.

Answer 3

你被困在一块岩石和一块坚硬的地方之间.直到HTML规范中存在一个位置type="currency"(并且可能永远不会发生不同国家编写货币的不同方式),你将不得不使用一些JS魔法来解决问题.

当然数字和电话都不是最好的主意,但是通过使用一些JS狡猾我已经提出了这个解决方案:

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 : '';
}

只需根据焦点/模糊交换输入类型,这意味着一旦用户离开文本字段,我们就可以格式化它的屁股.当用户返回时,我们取值,如果有一个> 0,我们将其作为数字重新输入.这是工作测试,我希望它有所帮助:http://jsfiddle.net/ahmednuaman/uzYQA/

Answer 4

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

Tadeck 的解决方案（赏金获得者）使用 a<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 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();