web-dev-qa-db-ja.com

iOS5は、type = "number"またはtype = "tel"を使用せずに、デフォルトでテンキーを表示します

IOS5のリリースで、Appleは入力type = "number"フォームフィールドに独自の検証を追加しました。これはいくつかの問題を引き起こしています。要約すると、以下の質問を参照してください：

Input type = 'number'の新しい検証により、先行するゼロが削除され、iPhone iOS5のSafariとMacの最新のSafariで数値がフォーマットされます

Input type = "tel"はiphoneでテンキーを表示するように機能しますが、小数点のない電話キーパッドです。

Html/jsを使用してテンキーをデフォルトとして設定する方法はありますか？これはiPhoneアプリではありません。少なくとも、キーパッドに数字と小数点が必要です。

更新

Safari 5.1/iOS 5の数値入力フィールドは、数字と小数点のみを受け入れます。私の入力の1つのデフォルト値は$ 500,000です。 $、％は無効な文字であるため、これによりSafariに空白の入力フィールドが表示されます。

さらに、独自の検証onblurを実行すると、値に$が追加されるため、Safariが入力フィールドをクリアします。

したがって、Safari 5.1/iOS5のinput type = "number"の実装により、使用できなくなりました。

jsfiddle

ここで試してみてください http://jsfiddle.net/mjcookson/4ePeE/ Safari 5.1ではデフォルト値の$ 500,000は表示されませんが、$記号と記号を削除すると表示されます。イライラする。

javascriptiphonehtmlios5input
36
marissajmc

実用的なソリューション：iPhone 5でテスト済みAndroid 2.3、4

<span>を使用して入力フィールドシンボルを格納し、フォーマットされた<span>を通貨入力の上に配置するというTadeckのソリューション（賞金獲得者）は、基本的に私がやったことです。

私の最終的なコードは異なりますが短いので、ここに投稿します。このソリューションは、入力フィールド内の$、％記号の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" />
  • スパンを通貨入力の上に配置し、入力を表示に設定します：なし
  • ユーザーがスパンをクリック/タップすると、スパンが非表示になり、入力が表示されます。スパンを完全に配置すると、遷移はシームレスになります。
  • 数値入力タイプが検証を処理します。
  • 入力のブラーと送信時に、スパン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();
3
marissajmc

シンボルを含むようにフィールドをスタイル設定する

この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

細分性の定義

数値入力に関するドキュメント（編集者の下書き） に基づいて、粒度を定義するにはstep="<some-floating-point-number>"属性を追加する必要があります<input>タグへ：

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

そしてそれは多くの最新のブラウザで動作します。テストについては this 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にあります）。コードは短縮とクリーンアップが必要ですが、概念実証です。それを試して、あなたの発見を共有してください。

16
Tadeck

$を入力フィールドの外側に（ラベルとして）配置しないでください。または、入力フィールドの右側にあるパーセント記号ですか？それはあなたの問題を解決し、input type = "number"を使用することができ、それはうまくいくようです。

7
Dad

あなたは岩と難しい場所の間に立ち往生しています。 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/

5
Ahmed Nuaman

次のコードは、iOS5搭載のiPadの数字キーボードをポップアップ表示し、any文字の入力を許可し、any値の設定を許可します。

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

ただし、醜く、壊れやすく（おそらく壊れる可能性があります...）、iPhoneでは機能しません（iPhoneには0〜9しか使用できない数字キーパッドが表示されます）。ソリューションは、パターン\d*またはそれに相当する[0-9]*を使用した場合にのみ機能するようです。

多分同じように振る舞うtype="tel"を使うほうがいいでしょう。

3
robocat

私も同様の問題を抱えていて、この醜いjsソリューションを思いついたので、iPadにテンキーをポップアップさせる必要がありました。

私の問題は、フォームが投稿されたときに、サファリが数字以外のすべてをフィルターで取り除いてしまうことでした。「3/7」や「65 $」など、さまざまな追加の文字が必要です。

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

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

それは単に入力タイプを「テキスト」に戻すだけです後 iPadは数字キーパッドを表示し、サファイアは数字以外を削除しなくなりました。

それが誰かを助けることを願っています！

2
Snorvarg

このソリューションは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のコメントとは関係なく見つけました（私は過去に試してみましたが、彼のコメントに気づきました-間違いです！）。

0
robocat

Safariが入力要素のHTML5 'inputmode'属性をサポートする場合、問題は解決されます。それがいつ起こるか、いつ起こるかは誰にもわかりません。それまでの間、 このリンク は興味深い読み物を提供します。

0
rakensi

IPhoneの問題を回避する別の方法が存在する可能性があります。

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

これにより、タイプが数値に変更されますbeforeタッチすると入力にフォーカスが移動し（数値キーボードが表示されるため）、タイプをテキストに変更して、正しい値を編集できるようにします。

確実に機能させるのは難しいかもしれませんが、現在は入力に触れていますが、指をスライドさせてコントロールから離すと、type = numberのままになり、キーボードの[次へ]ボタンを検出する方法など、他の問題が考えられません。

0
robocat

私たちは結局ハックなソリューションを使用して、フォーカスされたときに数字と句読点のキーボードが表示されるようにしました。これはiPhoneで機能します。キープレスを記録して値をシミュレートします。

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

入力タイプをフォーカスのあるtype = numberからtype = textに変更しようとしましたが、信頼性がありませんでした：（1）数字キーボードが100％の時間を表示しなかった、（2）フォームが次に、フォーカスされた入力を表示するための自動スクロールが完全に詰まりました（フォーカスされた入力が画面外または仮想キーボードの下にある場合があります）。

テンキーを表示する（例：type=tel）は、小数点またはコロンの入力を許可しませんでした。

IPadでは<input type=text pattern=[0-9]*>数字と句読点のキーボードを表示しますが、そのソリューションはiPhoneでは機能しません（iPhoneには小数点のない数字キーパッドが表示されます）。

0
robocat