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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。