From e4c65076b5a08955dec7eddad9f9d583998306aa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Feb 2022 15:42:07 +0900 Subject: 2021/09/15 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlinputelement/stepup/index.md | 185 ++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 files/ja/web/api/htmlinputelement/stepup/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/htmlinputelement/stepup/index.md b/files/ja/web/api/htmlinputelement/stepup/index.md new file mode 100644 index 0000000000..365d03de0b --- /dev/null +++ b/files/ja/web/api/htmlinputelement/stepup/index.md @@ -0,0 +1,185 @@ +--- +title: HTMLInputElement.stepUp() +slug: Web/API/HTMLInputElement/stepUp +tags: + - API + - HTML DOM + - HTMLInputElement + - メソッド + - リファレンス + - テキスト欄選択 API +browser-compat: api.HTMLInputElement.stepUp +translation_of: Web/API/HTMLInputElement/stepUp +--- +{{APIRef("HTML DOM")}} + +**`HTMLInputElement.stepUp()`** メソッドは、数値型の {{HTMLElement("input")}} 要素の値を +[`step`](/ja/docs/Web/HTML/Attributes/step) 属性の値、または step 属性が明示的に設定されていない場合は既定の `step` の値だけ増加させるものです。このメソッドを呼び出すと、 {{htmlattrxref("value","input")}} は ({{htmlattrxref("step","input")}} \* n) だけ減少します。ここで、n は指定されなかった場合、既定で `1` となり、[`step`](/ja/docs/Web/HTML/Attributes/step) が指定されなかった場合、 `step` の既定値となります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
入力型既定の step の値step の宣言の例
{{HTMLElement("input/date", "date")}}1 （日） + 7 日（1 週間）単位の増加:
<input type="date" min="2019-12-25" step="7"> +
{{HTMLElement("input/month", "month")}}1 （ヶ月） + 12 ヶ月（1 年）単位の増加:
<input type="month" min="2019-12" step="12"> +
{{HTMLElement("input/week", "week")}}1 （週間） + 2 週間単位の増加:
<input type="week" min="2019-W23" step="2"> +
{{HTMLElement("input/time", "time")}}60 （秒） + 900 秒（15 分）単位の増加:
<input type="time" min="09:00" step="900"> +
+ {{HTMLElement("input/datetime-local", "datetime-local")}} + 1 （日） + 同じ曜日:
<input type="datetime-local" min="019-12-25T19:30" + step="7"> +
{{HTMLElement("input/number", "number")}}1 + 0.1 刻み
<input type="number" min="0" step="0.1" max="10"> +
{{HTMLElement("input/range", "range")}}1 + 2 ずつ増加:
<input type="range" min="0" step="2" max="10"> +
+ +このメソッドを呼び出すと、フォームコントロール内で設定された制約の範囲内で、 `step` 属性で指定された値に引数を掛けた値だけ、フォームコントロールの値を変更します。引数が渡されなかった場合の既定値は `1` です。このメソッドは、値が [`max`](/ja/docs/Web/HTML/Attributes/max) を上回ったり、 [`step`](/ja/docs/Web/HTML/Attributes/step) 属性が設定する制約に違反させるようなことはしません。 + +`stepUp()` メソッドを呼び出す前の値が無効であった場合、例えば `step` 属性で設定した制約に適合しない場合、 `stepUp()` メソッドを呼び出すと、フォームコントロールの制約に適合する値が返されます。 + +フォームコントロールが時刻、日付、数値以外のもので、 `step` 属性に対応していない場合（前述の表に対応する入力型のリストを参照）、または `step` 値が `any` に設定されている場合、 `InvalidStateError` 例外が発生します。 + +## 構文 + +```js +element.stepUp( [ stepIncrement ] ); +``` + +### 引数 + +- _`stepIncrement`_ + - : `stepDecrement` 引数は省略可能で数値を指定します。引数が渡されなかった場合、 _stepDecrement_ は既定で 1 になります。 + +## 例 + +この例のボタンをクリックすると、 {{HTMLElement("input/number", "number")}} 入力型の値が増加します。 + +### HTML + +```html +

+ +

+

+ +

+ +``` + +### JavaScript + +```js +/* 関数を呼び出すボタンを生成 */ +let button = document.getElementById('theButton') +button.addEventListener('click', function() { + steponup() +}) + +function steponup() { +  let input = document.getElementById('theNumber') +  let val = document.getElementById('incrementer').value + +  if (val) { /* 引数付きで加算 */ +    input.stepUp(val) +  } else { /* 引数なしで加算。 0 を試してください。 */ +    input.stepUp() +  } +} +``` + +### CSS + +```css +input:invalid { + border: red solid 3px; +} +``` + +### Result + +{{EmbedLiveSample("Example")}} + +`stepUp` メソッドに引数を渡さなかった場合、既定値は `1` になります。他の値は `step` 属性の値に乗算されるので、この場合は `5` となります。 _`stepIncrement`_ に 4 を渡した場合、 `stepUp` は `4 * 5` すなわち `20` だけ行われます。この引数が `0` であった場合、数値は加算されません。 `stepUp` メソッドは入力が範囲外にならないように、この場合は `400` になった時点で停止し、引数として渡された値の小数点以下を切り捨てます。 + +段階の加算係数を `1.2` に設定してみてください。メソッドを呼び出すとどうなるでしょうか？ + +値を不正な数値である `4` に設定してみてください。メソッドを呼び出すとどうなるでしょうか？ + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("input")}} +- {{domxref("HTMLInputElement")}} +- {{domxref("HTMLInputElement.stepDown")}} +- [`step`](/ja/docs/Web/HTML/Attributes/step), + [`min`](/ja/docs/Web/HTML/Attributes/min), [`max`](/ja/docs/Web/HTML/Attributes/max) 属性 -- cgit v1.2.3-54-g00ecf