HTML | DOM 输入数字对象

HTML DOM 中的Input Number 对象用于表示 type=”number”的 HTML input 元素。
可以使用getElementById() 方法访问 type=”number”的输入元素。

句法：

• 它用于访问输入数字对象。

  document.getElementById("id");

• 它用于创建输入元素

  document.createElement("input");

输入数字对象属性：

Property	Description
type	This property is used to return which type of form element the number field is.
value	This property is used to set or return the value of the value attribute of a number field.
autocomplete	This property is used to set or return the value of the autocomplete attribute of a number field.
autofocus	This property is used to set or return whether a number field should automatically get focus when the page loads.
defaultValue	This property is used to set or return the default value of a number field.
disabled	This property is used to set or return whether a number field is disabled or not.
form	This property is used to return reference to the form that contains the number field.
list	This property is used to return a reference to the datalist that contains the number field.
max	This property is used to set or return the value of the max attribute of a number field.
min	This property is used to set or return the value of the min attribute of a number field.
name	This property is used to set or return the value of the name attribute of a number field.
placeholder	This property is used to set or return the value of the placeholder attribute of a number field.
readOnly	This property is used to set or return whether the number field is read-only or not.
required	This property is used to set or return whether the number field must be filled out before submitting a form.
step	This property is used to set or return the value of the step attribute of a number field.

输入数字对象方法：

Method	Description
stepDown()	This method is used to decrement the value of the input number by a specified number.
stepUp()	This method is used to increment the value of the input number by a specified number.

示例 1：

  
    
  
          
            GeeksForGeeks  
        
  
        DOM Input Number Object
  
        
  
        Click the button to get the
          number of the number field.
  
        
            Click Here!
        
  
        
  
        
            function myFunction() {
                  
                // Accessining input value
                var x = 
                 document.getElementById("myNumber").value;
                document.getElementById(
                  "demo").innerHTML = x;
            }
        
  
    
  

输出：

点击按钮前：

点击按钮后：

示例 2：

  

  
      
            GeeksForGeeks  
        
  
    DOM Input Number Object
  
    Click the button to create a Number field.
  
    Click Here!
  
    
        function myFunction() {
            
            // Creating input element.
            var x = document.createElement("INPUT");
            x.setAttribute("type", "number");
            x.setAttribute("value", "5678");
            document.body.appendChild(x);
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

注意： Internet Explorer 9+ 版本支持type=”number” 的 元素。

支持的浏览器：

• 谷歌浏览器
• 火狐浏览器
• 边缘
• 苹果浏览器
• 歌剧