📌  相关文章
📜  HTML | DOM 输入文本禁用属性(1)

📅  最后修改于: 2023-12-03 15:31:14.343000             🧑  作者: Mango

HTML | DOM 输入文本禁用属性

在编写Web应用时，我们经常需要收集用户的输入信息。有时候需要禁用输入框，这时候我们可以使用HTML或者DOM来实现。

HTML禁用属性

在HTML中，我们可以使用禁用属性（disabled）来禁用输入框。例如：

<input type="text" name="username" disabled>

在这个例子中，输入框被禁用，用户无法在该输入框中输入任何内容。

DOM禁用属性

在JavaScript中，我们可以使用DOM来禁用输入框。

首先，我们需要获取到想要禁用的元素，通常使用document.getElementById()或者document.querySelector()方法来获取。

var input = document.getElementById('myInput');

然后，我们可以设置其禁用属性（disabled）为true。

input.disabled = true;

完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>禁用输入框</title>
</head>
<body>
	<input type="text" id="myInput" value="我可以被禁用">
	<button onclick="disableInput()">禁用输入框</button>

	<script>
		function disableInput() {
			var input = document.getElementById('myInput');
			input.disabled = true;
		}
	</script>
</body>
</html>
注意事项
  • 禁用属性对应的值必须为true，否则无效。
  • 禁用属性只影响用户输入，不影响用户选择、复制、粘贴、剪切等操作。
  • 禁用属性的元素不会提交到服务器，在后台也无法获取其值。
参考资料