フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発：HTML5“とか”アプリ開発入門（7）（2/3 ページ）

HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介。iPhoneで見るとキーボードまで変化するタイプも!?

[白石俊平，株式会社オープンウェブ・テクノロジー] PC用表示関連情報

LINE

Hatena

前のページへ | 次のページへ

スピンボタン操作の単位を決める「step」属性

　日付関係の入力フィールド（後、後述する数値入力フィールドも）は、入力される値の「ステップ値」を指定可能です。例えば、以下のように指定します。

　「step="60"」と指定されていることから、上のdatetimeフィールドは「60秒」、つまり1分単位でステップするようになります。実行結果は以下のようになり、スピンボタンでの操作が「分」単位になるだけではなく、「秒」の単位が入力値からなくなっているのが分かると思います。

分単位でステップするよう指定した日時入力フィールド（画像はChrome 9）

　このように、step属性を使用すると、入力フィールドに対して以下のような効果を付与できます。

ステップ値に該当しない値を入力できなくなる。上記の例では、分未満の単位（秒、ミリ秒）は入力できない
スピンボタン使用時に増減する値も、ステップ値を単位とするようになる。上記の例では、分単位で値が増減するようになる

　datetimeタイプのフィールドが「秒」を基準としてステップの増分値が決まったように、タイプごとにステップの基準となる単位が決められています。この単位と、step属性に指定された値を掛け算することで、ステップ値が算出されます。

　また、step属性を省略されたときのデフォルト値もタイプごとに設定されています。以下に、その値をまとめておきます。


タイプ	ステップの単位	デフォルトのステップ値
date	1日	1日
datetime	1秒	60秒
datetime-local	1秒	60秒
month	1カ月	1カ月
week	1週間	1週間
time	1秒	60秒

　上記の表を踏まえて、あと2つほど例をお見せしましょう。以下は、「step=2」を指定したweekタイプの入力フィールドです。選択できる週が1週おきになっているのがお分かりでしょうか？

（画像はOpera 11）

　今度は、step値に小数を指定した例です。datetimeタイプのステップする単位は1秒（1000ミリ秒）なので、以下のように「step=0.001」とすることで、ステップ値をミリ秒単位に切り替えられます。

（画像はChrome 9）

　また、step属性に対応した入力フィールドをJavaScriptで操作する場合、「stepUp()」「stepDown()」というメソッドを使用して、値をステップ単位でも変更できます。これらのメソッドはステップ数を引数に取り、「ステップの増分×ステップ数」分、値を変化させます（引数を省略した場合は、ステップ数が1であるとみなされます）。