HTML DOM Input Number 对象

htmlweb developmentfront end technology更新于 2025/7/16 6:04:17

HTML DOM Input Number 对象表示类型为"number"的 <input< 元素。

让我们看看如何创建输入数字对象

语法

以下是语法 −

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

属性

以下是 Input Number 对象的属性 −

属性	说明
autocomplete	返回并修改数字输入字段的 autocomplete 属性值。
autofocus	返回并修改页面加载时输入数字字段是否获得焦点。
disabled	返回并修改输入数字字段是否禁用。
defaultValue	返回并修改输入数字的默认值字段。
form	返回HTML文档中包含输入数字字段的表单的引用。
list	返回包含输入数字字段的数据列表的引用。
max	返回并修改输入数字字段max属性的值。
min	返回并修改输入数字字段min属性的值。
name	返回并修改输入数字字段name属性的值。
readOnly	返回并修改输入数字字段是否是只读或否。
required	返回并修改数字字段在提交表单前是否必须填写。
step	返回并修改输入数字字段的set属性值。
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>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>