HTML DOM Input Month 对象

HTML DOM Input Month 对象

HTML DOM (文档对象模型) Input Month 对象表示 <input type=“month”> 元素。该对象继承自 HTML DOM Input 对象，具有相同的属性和方法。

属性

value

设置或返回输入字段的值。

<input type="month" id="date">
<script>
  document.getElementById("date").value = "2021-06";
</script>

max

设置或返回可选的最大日期，格式为“YYYY-MM”。

<input type="month" id="date">
<script>
  document.getElementById("date").max = "2021-12";
</script>

min

设置或返回可选的最小日期，格式为“YYYY-MM”。

<input type="month" id="date">
<script>
  document.getElementById("date").min = "2021-01";
</script>

disabled

设置或返回是否禁用该输入字段。

<input type="month" id="date">
<script>
  document.getElementById("date").disabled = true;
</script>

form

输入字段所在的表格。

<form id="myForm">
  <input type="month" id="date">
</form>
<script>
  var form = document.getElementById("date").form.id; //返回 "myForm"
</script>

name

设置或返回输入字段的名称。

<input type="month" id="date" name="birthday">

required

设置或返回是否在提交表单之前必须填写该输入字段。

<input type="month" id="date" required>

step

输入字段的合法间隔值。

<input type="month" id="date">
<script>
  document.getElementById("date").step = "2";
</script>

方法

HTML DOM Input Month 对象没有自己的方法，但是它继承了父对象HTML DOM Input的常用的事件和方法。

事件

HTML DOM Input Month对象继承了所有的 HTML DOM Input 事件。以下是一些常用的事件：

onchange

当元素的值更改时触发。

<input type="month" id="date" onchange="myFunction()">
<script>
  function myFunction() {
    alert("The value changed");
  }
</script>

onfocus

当元素获得焦点时触发。

<input type="month" id="date" onfocus="myFunction()">
<script>
  function myFunction() {
    alert("The input field is in focus");
  }
</script>

onblur

当元素失去焦点时触发。

<input type="month" id="date" onblur="myFunction()">
<script>
  function myFunction() {
    alert("The input field lost focus");
  }
</script>

浏览器兼容性

请注意，HTML5 <input type=“month”> 只能在现代浏览器（如Chrome，Firefox，Safari和Edge）中使用。

结论

HTML DOM Input Month对象为开发人员提供了控制HTML <input type=“month”> 元素的灵活性和功能。开发人员可以使用该对象来设置和获取各种属性，并使用相关的事件处理程序执行相应的操作。虽然该对象并不是所有浏览器都支持的，但在现代浏览器中，它是一个非常有用的工具。

HTML DOM Input Image 对象 HTML DOM Input Number 对象