HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMの入力番号（number）オブジェクトとは？基本構文・プロパティ・メソッドを解説

HTML DOM の入力番号（input number）オブジェクトは、type="number" を指定した <input> 要素を表します。このオブジェクトを使うことで、JavaScript から数値入力フィールドの値や属性を動的に操作できます。

ここでは、入力番号オブジェクトの作成方法、主なプロパティとメソッド、そして具体的なコード例をわかりやすく解説します。

基本構文

入力番号オブジェクトを作成するには、まず createElement() で INPUT 要素を生成し、その後 setAttribute() で type 属性に "number" を指定します。

var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");

主なプロパティ

入力番号オブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
autocomplete数値入力フィールドの autocomplete 属性の値を取得・変更します。
autofocusページ読み込み時に、この数値入力フィールドへ自動的にフォーカスするかどうかを取得・変更します。
disabled数値入力フィールドが無効化されているかどうかを取得・変更します。
defaultValue数値入力フィールドの初期値（既定値）を取得・変更します。
formHTML ドキュメント内で、この数値入力フィールドを含むフォームへの参照を返します。
listこの数値入力フィールドに関連付けられた datalist 要素への参照を返します。
max数値入力フィールドの max 属性の値を取得・変更します。
min数値入力フィールドの min 属性の値を取得・変更します。
name数値入力フィールドの name 属性の値を取得・変更します。
readOnly数値入力フィールドが読み取り専用かどうかを取得・変更します。
requiredフォーム送信時に、この数値フィールドの入力が必須かどうかを取得・変更します。
step数値入力フィールドの step 属性の値を取得・変更します。
type数値入力フィールドの type 属性の値を返します。
value数値入力フィールドの value 属性の内容を取得・変更します。
placeholder数値入力フィールドの placeholder 属性の値を取得・変更します。

主なメソッド

入力番号オブジェクトには、値を増減させるための便利なメソッドが用意されています。

メソッド説明
stepUp()引数で指定した値だけ、数値入力フィールドの値を増加させます。
stepDown()引数で指定した値だけ、数値入力フィールドの値を減少させます。

コード例

実際にボタンをクリックして、数値入力フィールドを動的に作成する例を見てみましょう。

<!DOCTYPE html>
<html>
<style>

    body{
        text-align:center;
        background-color:#363946;
        color:#fff;
    }
    form{
        margin:2.5rem auto;
    }
    button{
        background-color:#db133a;
        border:none;
        cursor:pointer;
        padding:8px 16px;
        color:#fff;
        border-radius:5px;
        font-size:1.05rem;
        outline:none;
    }
    .show{
        font-weight:bold;
        font-size:1.4rem;
    }
</style>
<body>
<h1>入力番号フィールドの作成デモ</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
</fieldset>
</form>
<button onclick="createNumberInput()">数値入力フィールドを作成</button>
<p class="show"></p>
<script>
    function createNumberInput() {
        var numberInput = document.createElement("INPUT");
        numberInput.setAttribute("type", "number");
        numberInput.placeholder = "数値を入力してください";
        document.querySelector("fieldset").appendChild(numberInput);
        document.querySelector(".show").innerHTML = "数値入力フィールドを作成しました！";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOMの入力番号（number）オブジェクトとは？基本構文・プロパティ・メソッドを解説

「数値入力フィールドを作成」ボタンをクリックすると、JavaScript によって新しい type="number" の入力フィールドがフォーム内に追加されます。

HTML DOMの入力番号（number）オブジェクトとは？基本構文・プロパティ・メソッドを解説


  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注