Question

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

Input type='number' new validation removes leading zeros and formats number in Safari for iPhone iOS5 and latest 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;
}

将其视为概念证明。有关实例，请参阅this jsfiddle。在Chrome中看起来像这样：

enter image description here

定义更小的粒度

根据the documentation on number input (Editor's Draft)，定义粒度，您需要将step="<some-floating-point-number>"属性添加到<input>代码：

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

它可以在许多现代浏览器中使用。有关测试，请参阅this jsfiddle。

结论

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

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

你也可以欺骗某人相信他正在看到输入字段的内容，但是向他展示了该字段背后的其他内容（这是我原始解决方案的一些扩展）。然后，如果有人点击该字段，您可以传播正确的值等，然后返回模糊的先前状态。请参阅此代码（live example on 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

你被困在一块岩石和一块坚硬的地方之间。直到type="currency"的HTML规范中存在一个位置（并且可能永远不会发生不同国家/地区编写货币的不同方式），您将不得不使用某些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 : '';
}

只需根据焦点/模糊交换输入类型，这意味着一旦用户离开文本字段，我们就可以格式化它的屁股。当用户返回时，我们会获取该值，如果有一个＆＃39; s＆gt; 0，我们把它作为一个数字粘在一起。这是工作测试，我希望它有所帮助：http://jsfiddle.net/ahmednuaman/uzYQA/

Answer 4

以下弹出带iOS5的iPad数字键盘，允许输入任何字符，并允许设置任何值：

<input type="text" pattern="\d*">

然而它是丑陋的，脆弱的（将来可能会破坏......），并且在iPhone上不起作用（iPhone显示只允许0到9的数字小键盘）。该解决方案似乎仅使用模式\d*或其等效的[0-9]*。

使用似乎行为相同的type="tel"可能更好。

Answer 5

工作解决方案：在iPhone 5，Android 2.3,4

上测试

Tadeck的解决方案（赏金赢家）使用<span>来包含输入字段符号并在货币输入之上放置格式化的<span>基本上就是我最终要做的。

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

符号字段，例如。 “xx％”“xx years”

<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();

Answer 6

我遇到了类似的问题，并提出了这个丑陋的js解决方案，迫使iPad弹出数字键盘。

我的问题是，在发布表单时，safari会过滤除数字之外的所有内容，并且我需要各种额外的字符，例如＆＃34; 3/7＆＃34;或＆＃34; 65 $＆＃34;

var elem = document.getElementById('MathAnswer');
elem.type = 'number';

elem.onfocus = function() {
  setTimeout(function() {
    elem.type = 'text'; 
  }, 1);
};

它只是将输入类型设置回＆＃39; text＆＃39; 在 iPad显示数字键盘后，瞧，safari不再删除任何非数字。

希望它有所帮助！

Answer 7

iPhone的问题还有另一种解决方法：

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />

这会将类型更改为之前输入在触摸时获得焦点（以便数字键盘显示），然后将类型更改为文本，以便可以编辑正确的值。

让它可靠地工作可能很难，例如当前触摸输入然后滑动手指关闭控制将其保留为type = number，我想不出一种方法来检测键盘上的Next按钮，以及其他问题。

Answer 8

此解决方案适用于iPad和iPhone，甚至是Next / Previous工作。请尝试http://fiddle.jshell.net/L77Cq/2/show/（或http://jsfiddle.net/L77Cq/进行编辑）。

<!DOCTYPE html>
<head>
<style>
    .riggedinput::-webkit-input-placeholder {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
}
</style>
<script>
    function focused() {
        var test = document.getElementById('test');
        setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons
            if (document.activeElement === test) {
                test.type = 'text';
                test.value = test.placeholder;
                test.placeholder = '';
            }
        }, 1);
    }
    function blurred() {
        var test = document.getElementById('test');
        var value = test.value;
        test.placeholder = value;
        test.value = '';
        test.type = 'number';
    }
    if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert ('Code specific to Mobile Safari');
</script>
</head>
<body>
    <input>
    <input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()">
    <input>
</body>

它仍然存在以下问题： *如果使用表单，需要将值复制到隐藏字段。 *由于某种原因，页面滚动有趣（iPhone地址栏隐藏，iPad调试控制台隐藏）。

PS：我发现这种技术独立于上面的Ahmed Nuaman的评论（我过去曾经尝试过，现在注意到他的评论 - arrrgh！）。

Answer 9

如果Safari支持输入元素的HTML5“inputmode”属性，那么问题就解决了。没有人知道是否会发生这种情况。与此同时，this link提供了一些有趣的阅读。

Answer 10

我们最终使用了一个hacky解决方案，使数字和标点键盘显示何时可以在iPhone上工作：我们记录按键并模拟值。

https://output.jsbin.com/necuzoj/quiet

我们尝试将输入类型从type = number更改为type = text on focus，但它不可靠：（1）数字键盘没有显示100％的时间，（2）如果表单是比屏幕长，然后自动滚动显示聚焦输入完全填满（有时聚焦输入将在屏幕外或虚拟键盘下）。

显示数字小键盘（例如type=tel）不允许输入小数点或冒号。

在iPad上，您可以使用<input type=text pattern=[0-9]*>来显示数字和功能键盘，但该解决方案不适用于iPhone（iPhone显示数字小键盘没有小数点）。

Answer 11

我只是使用像<input type="number" name="job_order_id" maxlength="7" size="10px" value="" />这样的东西，键盘上有数字，而不是电话键盘。您也可以将前导值置于值中，它们已经存在。

iOS5默认显示数字小键盘，不使用type =“number”或type =“tel”

11 个答案: