HTML DOM Input Number用法及代碼示例

HTML DOM中的輸入數字對象用於表示類型為“number”的HTML輸入元素。可以使用getElementById()方法訪問類型為“number”的輸入元素。

用法:

用於訪問輸入數字對象。
```
document.getElementById("id");
```
用於創建輸入元素
```
document.createElement("input");
```

輸入數字對象屬性：

屬性	描述
type	此屬性用於返回number字段是哪種類型的表單元素。
value	此屬性用於設置或返回數字字段的value屬性的值。
autocomplete	此屬性用於設置或返回數字字段的自動完成屬性的值。
autofocus	此屬性用於設置或返回在頁麵加載時數字字段是否應自動獲得焦點。
defaultValue	此屬性用於設置或返回數字字段的默認值。
disabled	此屬性用於設置或返回是否禁用數字字段。
form	此屬性用於返回對包含數字字段的表單的引用。
list	此屬性用於返回對包含數字字段的數據列表的引用。
max	此屬性用於設置或返回數字字段的max屬性的值。
min	此屬性用於設置或返回數字字段的min屬性的值。
name	此屬性用於設置或返回數字字段的name屬性的值。
placeholder	此屬性用於設置或返回數字字段的占位符屬性的值。
readOnly	此屬性用於設置或返回數字字段是否為隻讀。
required	此屬性用於設置或返回在提交表單之前是否必須填寫數字字段。
step	此屬性用於設置或返回數字字段的step屬性的值。

輸入數字對象方法：

方法	描述
stepDown()	此方法用於將輸入數字的值減一指定數字。
stepUp()	此方法用於將輸入數字的值增加指定的數字。

示例1：

<!DOCTYPE html> 
<html> 
  
    <body style="text-align:center;"> 
  
        <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
        <h2>DOM Input Number Object</h2> 
  
        <input type="number" 
               id="myNumber" 
               value="10"> 
  
        <p>Click the button to get the 
          number of the number field.</p> 
  
        <button onclick="myFunction()"> 
            Click Here! 
        </button> 
  
        <p id="demo"></p> 
  
        <script> 
            function myFunction() { 
                  
                // Accessining input value 
                var x =  
                 document.getElementById("myNumber").value; 
                document.getElementById( 
                  "demo").innerHTML = x; 
            } 
        </script> 
  
    </body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

示例-2：

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <h2>DOM Input Number Object</h2> 
  
    <p>Click the button to create a Number field.</p> 
  
    <button onclick="myFunction()">Click Here!</button> 
  
    <script> 
        function myFunction() { 
            
            // Creating input element. 
            var x = document.createElement("INPUT"); 
            x.setAttribute("type", "number"); 
            x.setAttribute("value", "5678"); 
            document.body.appendChild(x); 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

注意： <input>元素Internet Explorer 9+版本支持type =“ number”的類型。

支持的瀏覽器：

穀歌瀏覽器
火狐瀏覽器
Edge
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自divyatagoel0709大神的英文原創作品 HTML | DOM Input Number Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。