web-dev-qa-db-ja.com

数値入力で先行ゼロを強制する

アラームウェブアプリを書いています。 2つの数値入力があります。1つは時間用、もう1つは分用です。したがって、キーボードの矢印を使用すると、0から23/59になります。代わりに00（01,02など）から23/59に変更するHTMLネイティブの方法はありますか？

とにかく私のJSが欠落している0を管理しているので、私はUIの側面についてのみ心配しています。

編集-要求に応じて：

私が持っているもの：

Current

私が欲しいもの：

Objective

0,1,2から59に変更する代わりに、数値が10（00,01,02から59）より小さい場合、自動的に先頭に0を付けたいと思います。

htmlnumber-formatting
14
Simon

Selectタグを使用しない限り、これを行うためのネイティブHTMLの方法はありません。テキスト入力を使用している場合は、javascriptによって最初の10個の値に先頭の0を追加する必要があります。

6
Guillaume Raymond

これを使用して、必要に応じてゼロを追加します。

<script>
  function leadingZeros(input) {
    if(!isNaN(input.value) && input.value.length === 1) {
      input.value = '0' + input.value;
    }
  }
</script>

そして、私はそれを入力のさまざまなイベントで、たとえば私にとってこれまでで最もうまくいくと呼んでいます。

<input type="number"
       value="00"
       onchange="leadingZeros(this)"
       onkeyup="leadingZeros(this)"
       onclick="leadingZeros(this)" />

これは理想的な解決策ではありません。主な理由は、ユーザーが数値を変更し、ゼロが付加されると視覚的にわずかな変化が生じるためですが、私にとってはうまくいきます:)

編集：言及するのを忘れて、私はjavascriptなしのネイティブソリューションを求められた答えに感謝します、しかし私はグーグル検索を通してここに着陸する人々に何かを提供したかったです。

9
apbarratt