2017-09-26 11 views
1

ほとんど私が知っているPython(Flaskを実行している)で、なぜ私が助けてくれるのかというバグを修正するのを助けてくれるように頼まれました。しかし、私のHTML知識は非常に悪く、私は助けが必要です。私はPythonコードのバグを修正しましたが、ユーザーがアプリケーションを中断する方法を見つけられないようにしたいと考えています。これは、ユーザーが取引の時間を入力するHTMLのフォームと関係しています。入力は、プレースホルダ 'hh:mm:ss'を含むテキスト形式ですが、その形式の時間以外のすべての種類のものを入力することはできません。私がこれを最初からやったのであれば、私はこのフィールドを「時間」フォーマットにしてしまいましたが、あまりにも多くのことがテキストフィールドであることに依存しています。HTML時間入力で範囲を実装する

コードの一部である:

<input type="text" name="time_left" id="time_left" placeholder="hh:mm:ss"> 

唯一の制限は、時刻00:00:00よりも小さくすることはできず、それは1時30分00秒を超えることができないことです。私はちょうどここにどこかに最小/最大属性を置くのが大好きですが、私はそれが簡単だとは思っていません。特にそれはテキストである。

誰もがHTML5のみのソリューションについて

答えて

1

(私が言うように単純なより良いが、私はHTMLと非常に良好ではないよ)私は何ができるかを私に助言することができ、2つの方法があります。 1つはtype="time"入力にすることです。これはあなたの心配があれば、input.valueを文字列として読み取ることができます。

<input type="time" min="00:00:00" max="01:30:00"> 

ブラウザはsteps of 1 minuteとなります。秒精度が必要な場合は、step="1"を追加します。

<input type="text" pattern="0(1:30:00|1:[012][0-9]:[0-5][0-9]|0:[0-5][0-9]:[0-5][0-9])"> 

どちらのソリューションは、生存可能であり、それぞれが長所と短所があります。

他のソリューションは、pattern属性を追加することです。

後者のほうがブラウザサポートが優れていますが、100%近くサポートするにはブラウザから引き継ぐJSライブラリが必要です。私はHyperformと書いていますが、それはそれ以上のことですが、このフィールドが1つの場合は、独自のイベントハンドラを作成してその入力フィールドのchangeイベントに結びつけるほうがよいでしょう。

編集:pattern属性で正規表現は|で区切られたいくつかの例を区別します。最初の最も簡単なのは最大時間01:30:00です。次は、01:00から01:29:59までの時間、最後に00:00から00:59:59までの時間です。

+0

私は2番目のオプションを使用して、私が探していたことをしました。ありがとうございました!私は今、ページ上の説明を追加して、これが許可されている範囲であることをユーザーに知らせています。 緊急ではありませんが、先行0をオプションにする方法はありますか? ...または何か –

+0

はい、' 0? 'はうまくいくはずです。 'pattern'属性の内容は基本的にJavascriptが理解している正規表現です。暗黙の開始は'^'、終了は' $ 'です。 – Boldewyn

+0

クール、 "要求されたフォーマットに一致してください"というメッセージをより具体的なものに変更する方法はありますか(ページに説明を追加するのではなく) –