HTML | DOM 输入周只读属性

input 元素在 HTML 中是一种常用的表单控件，可以用来让用户输入文本、数字、日期等信息。input 元素有很多属性，其中一个是 readonly，用于指定输入框为只读（不可编辑）。

但是，对于一些需要输入日期、时间等信息的场景，我们不仅想要让用户无法编辑输入框，还希望用户能够通过其他方式（例如点击日历控件）来选择合适的值。这时候，我们可以使用 week 类型的 input 元素，并添加 readonly 属性。

week 类型的 input 元素

week 类型的 input 元素可以用来让用户选择周，并返回一个 ISO 格式的周数。该元素可以用以下 HTML 代码创建：

<input type="week" name="week" value="2022-W01" readonly>

其中，type 属性值为 week，name 属性用于指定该输入框的名称，value 属性用于指定初始值，readonly 属性用于指定该输入框为只读。

week 类型的输入框会显示一个带有左右箭头的小日历图标，用户可以通过单击箭头或直接单击输入框来打开选择器。选择器中显示的是 ISO 格式的周数，例如 2022-W01 表示 2022 年的第一周。

通过 JavaScript 获取周数

通过 JavaScript，我们可以轻松地获取 week 类型的输入框中选择的周数。以下是获取周数的示例代码：

let weekInput = document.querySelector('input[type="week"]');
let weekValue = weekInput.value;
console.log(weekValue); // 输出当前选择的周数，例如 "2022-W01"

其中，document.querySelector('input[type="week"]') 用于获取页面中第一个 type 属性为 week 的 input 元素，weekInput.value 则会返回该输入框的值，即选择的周数。

总结

week 类型的 input 元素能够方便地让用户选择周，并返回 ISO 格式的周数。通过添加 readonly 属性，我们可以将该输入框设置为只读，防止用户进行编辑。通过 JavaScript，我们可以轻松地获取用户选择的周数，从而进行后续处理。