web-dev-qa-db-ja.com

入力タイプ番号がiPadで機能しない

私はionicで入力を作成しています。これは数字のみを受け入れます。これは、safariとipadを除くすべてのブラウザとデバイスで機能します。ユーザーに数字以外のものを入力させたくありません。正規表現を実行しようとしました入力イベントの検証は、ユーザーがアルファベットを入力することを妨げるものではありません。keydownイベントを試しましたが、keyDownイベントでinnerTextを取得できません。

ipadsafariionic2
11
Ramya

これは古い質問であることはわかっていますが、たまたま同じ問題があり、結局私にとって有効だったものが回答として提供されていないことに気付いたので、次の人のために回答を追加します。

<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">

このサイト は、興味がある場合の解決策の背後にある理由を説明しています。

その要点は、pattern="[0-9]*"がiOSのテンキーの表示をトリガーするものであるのに対し、minとnumericは、他のOSとブラウザーがtype="number"で引き続き正常に機能することを確認するためのものです。

編集：iPad用のiOS 12.2はpattern="[0-9]*"修正をサポートしなくなりました。代わりにtype=telを使用してください。

12
Sylvan D Ash

あなたはこれを試すことができます

<ion-input type="tel" inputmode="numeric" pattern="[0-9]*"></ion-input>

これにより、入力がiOSの数値モードになるように強制されます。正規表現では、数値のみが取得されるようにします。私の知る限り、これはinput="number"では機能しませんが、これは古い解決策です（それでもまだ機能します）。したがって、numberで試すことができ、それが機能しない場合は、telにフォールバックします。

これが役に立てば幸い：D

3
Gabriel Barreto

できれば、入力のサンプルコードを提供してください。しかし、これも試すことができます

<ion-item>
    <ion-label color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input" type="number"></ion-input>
  </ion-item>

イオン入力 によると

「text」、「password」、「email」、「number」、「search」、「tel」、または「url」を使用できます。入力タイプとして。質問を間違えた場合は申し訳ありません。コードサンプルを試して提供してください。ありがとう:)

1
Diluk Angelo