"："と "。"の付いたIphoneとAndroid番号フィールド文字は許されますか？

Question

文字「：」と「。」を許可する数字フィールドが必要です。提出する。私は基本的には、ユーザが通常「2」または「3.3」の時間を入力するため、デフォルトでアルファニューメリックキーボードのテキストフィールドが必要です（時には「1:30」と入力されます）。これは私がやったコードですが、一部のAndroidデバイスではwebviewがうまく動かず、人々はmobile_form_hoursフィールドに何も入力できません。誰でも他のアイデアはありますか？私はフォームを提出する前に、それを数値フィールドにしてテキストフィールドに変更しようとしましたが、送信ボタンにはマウスボタンがありますが、どちらも動作しません。

<input type="text" id="mobile_form_hours" /> 

    $(document).on 'touchstart', '#mobile_form_hours', -> 
    $(this).attr('type', 'number'); 

    $(document).on 'keydown blur', '#mobile_form_hours', -> 
    $(this).attr('type', 'text'); 

Answer 1

pattern attributeを使用して、許可したいものの正規表現を設定することができます。

/* NOTE: This CSS is just for the live example and is not necessary, 
 
    it's the HTML you want. */ 
 
input {width: 200px; border: 1px solid #ccc; background: #fff;} 
 
input:valid {border-color: green; background: #eeffee;} 
 
input:invalid {border-color: red; background: #ffeeee;}

<input type="text" name="mobile_form_hours" pattern="\d{1,2}[\.:]\d{1,2}" placeholder="Enter a time, such as 3:45 or 2.5" required>

例のパターン値は、期間又はコロン、および別の1対2桁その後、1対2桁を可能にします。数字、ピリオド、およびコロンの連続を許可する場合は、次の値を使用できます。[\d:\.]+

ただし、ブラウザで値を強制する場合は、サーバーでも検証する必要があります。

Answer 2

2つの別々の番号フィールドでこれを時間と分に分割し、後で連結を使用することができます。私は数がそれで: ...

<input type="number" id="mobile_form_hours" /> : 
<input type="number" id="mobile_form_minutes" /> 

を持つことができ、あなたのコードでそれを必要とするときに使用できるとは思わない：

var timeAsString = $('#mobile_form_hours').val() + ":" + $('#mobile_form_minutes').val(); 

これはあなたに何をあなたをより細かく制御を与えるだろうユーザーは入力することができ、単語を入力することによって発生するエラーのリスクを減らすことができます（常に1人のユーザーがすべてを壊そうとします）