このページについて
このページではHTMLで使う事ができるstepの機能と使い方を解説しています。
step属性
stepはinputタグでのみ使う事ができる属性です。そのinputタグでも、type属性がnumber/range/date/datetime-local/month/time/weekの時に使う事ができます。
step属性の書き方
基本的に書くときはinputタグに付与し、値に数値の間隔を入力すればOKです。
numberで使う場合
numberで使う場合は以下のようになります。
<input type="number" step="10">
これは分かりやすいですね。直接入力した時は入力された数値がそのまま表示されますが、右側にあるスピナーボタンをクリックかタプすると10刻みで増加や減少していくと思います。
rangeで使う場合
rangeは範囲を意味します。これで使う場合は以下のようになります。
<input type="number" step="10">
ちなみにstepが無いrangeは以下です。
シークバー的なやつの動き方に注目してみてください。内部数値的なものがあり、それが10刻みで動く上のやつと、何も設定されていないので1刻みで動く下って感じでそれぞれ異なります。
date/month/time/weekで使う場合
ここは少し残念なお知らせになるんですが、まだ未対応のブラウザが多いようです。なので一応stepで数値を変更してるものをサンプルとして置いておきますが、使っているブラウザによってはなんの変化も無い可能性が多いです。
以下はdateです。dateで使う場合は1日単位となります。なので10なら10日、30なら30日という扱いになります。
<input type="date" step="10">以下はmonthです。1は一ヶ月単位となります。以下の場合は2ヶ月という扱いの予定です。
<input type="month" step="2">以下はweekです。これの場合は1は1週間という扱いになります。
<input type="week" step="3">以下はtimeです。これの場合はこれまでと違い、1は1秒単位となります。つまり分なら60倍してようやく1分という扱いになります。10分であればさらに10倍して600、20分なら1200とします。
<input type="time" step="1200">minについて
stepと一緒にmin属性やmax属性を使うと、より細かい制御が行えます。特にmin属性はマイナス方向への最小値を保証する事で、その数値を基準にしてstepで刻みます。
以下は最小値を2.1にして、stepで3刻みにするという書き方のinputタグです
<input type="number" min="2.1" step="3">右の上ボタンをクリックすると、まず2.1が出ます。そして再び押すと、今度はstepの3が適用されて5.1になります。逆に下ボタンを2回押しても、最小値が2.1で設定されているのでそれより下には下がりません。
max属性は同じことをしますが、スタートの数値を設定するというよりゴールの数値を設定するという使い方になります。
JavaScriptで取得・操作
JavaScriptでstepの数値を操作することは可能です。
stepを無効化する場合
document.querySeceltor('input[step]').step = false;この一行だけでOKです。だたこれを使うとinputタグでstepを使っている全ての入力エリアに対して、stepを無効化してしまいます。個別に対応したい場合はid属性を付与し、getElementByIdで対応しましょう。
stepを有効化する場合
document.querySeceltor('input[step]').step = true;先ほどとは逆です。これもid属性で個別に対応することもできます。
数値を動的に変化させる方法
数値を受け取り、その数値を使ってstepの数値を決定するという動的に変化させる方法を紹介します。
まずはinputで数値を受け取る入力エリアを2つ作成し、1つをstepの数値を決定するエリア、もう1つをstepを反映した数値を表示するエリアとします。
そして1つ目のstepの数値を決定するエリアをAとし、ここにoninput属性で数値が入力されるたびにJavaScriptで作成した関数を実行という書き方にします。
そして2つ目のstepを反映したエリアはBとし、ここに最小値のmin属性でも入れておきましょう。これは任意です。
JavaScript側ではoninput属性で呼び出される側の関数を作成します。まず変数を宣言し、そこにAの数値を受け取って代入します。その後、Bのstepに使う事ができるように代入します。
ここまでの一連の流れを組むと以下のようになります。
<input type="number" id="num" oninput="nums()" placeholder="stepの数値を選択">
<input type="number" min="3" step="4">
<script>
function nums(){
var x = document.getElementById('num').value;
document.querySelector('input[step]').step= x;
}
</script>わかりやすいかなと思ってplaceholder属性を付与しました。付与されている方が、Aです。その下にあるstep=”4″が設定されている方が、Bです。
ここで既に4が設定されていますが、JavaScriptで操作した場合は後から上書きしたものが適用されます。
まとめ
stepはブラウザによって実装がマチマチなため、一概にこういう使い方ができるよっていう解説はnumberの時のみだったりします。とは言えJavaScriptで無効化したり有効化したり、その数値を動的に変化させたりと色々と遊べるかなと思うのでどっかで使ってあげたいですね。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。