HTML | DOM 输入 URL 只读属性

在 HTML 和 DOM 中，通过使用输入元素（input）可获取被用户输入的数据。其中，type="url" 的输入框可限制用户只能输入合法的 URL 地址。除此之外，还有一个只读属性 readOnly，它可以使输入框变为只读状态，防止用户修改输入框的内容。

HTML 中的 readOnly 属性

在 HTML 中，readOnly 是输入元素的一个属性，可通过设置其值为 "readOnly" 或 "true" 来生效。以下是一个 type="url" 的输入框兼具只读属性的例子：

<input type="url" name="homepage" value="https://www.example.com" readOnly>

注意，设置 readOnly 仅仅是防止用户修改输入框的内容，并不能阻止用户将其选中和复制。

DOM 中的 readOnly 属性

在 DOM 中，readOnly 是输入元素的一个属性，可通过 JavaScript 来进行设置和获取。以下是一个示例：

var urlInput = document.getElementById("url-input");
urlInput.readOnly = true;

在此示例中，urlInput 表示一个 ID 为 "url-input" 的输入框元素。因为设置了 readOnly 属性为 true，所以该输入框元素变为了只读状态。

同样地，要获取输入框元素的 readOnly 属性值，也只需通过以下代码：

var isReadOnly = urlInput.readOnly;

以上代码会将 isReadOnly 的值设置为输入框元素的 readOnly 属性值。

总结

HTML | DOM 的 readOnly 属性可用于将输入框元素设置为只读状态，防止用户修改其中的内容。在 HTML 中，只需添加 readOnly 属性即可，并且它不能阻止用户复制和选中其内容。在 DOM 中，可以通过 JavaScript 来设置和获取 readOnly 属性的值。