18

カスタムパターンを入力タイプとして使用しているときに、iOS デバイスに数値キーボードを強制的に表示させる可能性はありますか?

私の入力パターン:

<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

「14.99」のような通貨値を入力し、iOS デバイスで数字にアクセスできるキーボードを表示したい

<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />

小数点記号がすべて欠落しているか、小数点記号を追加するときに数値として検証されていません。別の方法は、1->2->9->9 をこの順序で押すと、keypress() 0.01->0.12->1.29->12.99 で作成されるように、適切な場所に小数点記号を作成する JavaScript 関数である可能性があります。ただし、これには入力フィールドが必要ですtype='text'--> ここでの明らかな問題は、入力フィールドにフォーカスを当てるとテキスト キーボードが表示されることです。

この問題を解決するにはどうすればよいですか?

編集

環境：

  • JQM 1.3.2
  • jquery1.8.2
4

4 に答える 4

21

今のところ、JavaScript が唯一のソリューションです。これを行う最も簡単な方法を次に示します (jQuery を使用)。

HTML

<input type="text">

JavaScript

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

考え方は単純です。入力は最初から type="text" で終わりますが、touchstart イベントで一時的に type="number" になります。これにより、正しい iOS キーボードが表示されます。ユーザーが入力を開始するか、フィールドを離れるとすぐに、入力は再び type="text" になり、検証が回避されます。

この方法には 1 つの欠点があります。ユーザーが既に入力された入力に戻ると、入力は失われます (検証されない場合)。これは、ユーザーが前のフィールドに戻って編集することができないことを意味します。私の場合、これはそれほど悪いことではありません。なぜなら、ユーザーは電卓をさまざまな値で何度も使用する可能性があるため、入力を自動的に削除することでいくつかの手順を節約できるからです。ただし、これはすべての場合に理想的であるとは限りません。

Mobile Safari は、email、number、search、tel、および url の新しい HTML5 入力タイプ属性をサポートしているようです。表示するキーボードを切り替えます。type 属性を参照してください。

たとえば、次のようにします。

<input type="number" />

また、入力ボックスにフォーカスがあると、数字キーボードが表示されます (ユーザーがフル キーボードを使用して「123」ボタンを押したかのように)。

本当に数字だけが必要な場合は、次のように指定できます。

<input type="tel" />

そして、ユーザーは電話番号のダイヤルキーパッドを取得します。

これが Mobile Safari で動作することはわかっています。UIWebView で動作するとのみ想定しています。

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

于 2013-11-15T10:04:43.727 に答える
9

あなたが望むものを達成するためにこの小さなスニペットを作成し、iPhone 5 v7.0.3でテストしました

以前は、入力されe.whichたものを読み取ってから、小数点の前の数字を表す配列 ( before ) と別の配列 ( afterCharCode ) にプッシュして、 ( before ) 配列から小数点を超えて値を移動していました。

私の謙虚なプログラミング スキルのせいで、複雑に見えるかもしれません。

1)コードのデモ- 2)通貨換算のデモ

HTML:

<input type="tel" id="number" />

JS

変数と関数:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

メインコード:

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.push(number);

        // array of numbers before decimal mark
        before.push(value[i]);

        // move numbers past decimal mark
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});

リセット:

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

結果：

ここに画像の説明を入力

于 2013-11-16T17:44:52.003 に答える