# 实现input不可编辑的CSS方法
## 1. 使用disabled属性
1. 使用disabled属性
使用`disabled`属性可以在HTML中设置输入框不可编辑，这一设置是通过禁用表单元素完成的。
举个例子，看下面这个包含简单表单的HTML代码：
<form>
<label for="input-field">Input Field: </label>
<input type="text" id="input-field" name="input-field">
</form>
要禁用input元素，只需要在标签中添加disabled属性：
<form>
<label for="input-field">Input Field: </label>
<input type="text" id="input-field" name="input-field" disabled>
</form>
现在这个表单中的输入框已经不可编辑了。
## 2. 使用只读属性
2. 使用只读属性
这种方法与使用disabled属性实现的效果相似，但是它不会禁用表单元素，而是只允许它们在查看模式下显示。
举个例子，代码如下：
<form>
<label for="input-field">Input Field: </label>
<input type="text" id="input-field" name="input-field" readonly>
</form>
在这个示例中，input元素被设置成只读的，因此不能再输入新内容了，但是还可以选择文本和复制它。
## 3. 使用CSS属性
3. 使用CSS属性
还有一种方法是使用CSS属性。通过设置`pointer-events`属性为`none`，我们可以将输入区域变成不可编辑的。然后再使用`background-color`和`color`属性来使UI元素看起来像不可编辑的。
例如，看下面的代码：
<form>
<label for="input-field">Input Field: </label>
<input type="text" id="input-field" name="input-field">
</form>
我们要使这个input元素不可编辑，只需使用下面的CSS代码：
input[disabled] {
pointer-events: none;
background-color: #f9f9f9;
color: #bfbfbf;
}
上面的代码会禁用所有带有disabled属性的input元素，并且将它们的背景色改为灰色，文本颜色变为淡灰色。
## 4. 使用JavaScript
4. 使用JavaScript
最后一种方法是使用JavaScript。这种方法不是在HTML或CSS中设置一个不可编辑的标志，而是在脚本中处理输入的控制。我们可以通过在JavaScript中设置`readOnly`属性来禁用表单元素。
举个例子，看下面的代码：
<form>
<label for="input-field">Input Field: </label>
<input type="text" id="input-field" name="input-field"class="readonly">
</form>
现在，我们通过添加一个类名`readonly`来定义应该被设置成不可编辑的input元素。然后使用JavaScript代码来禁用这个元素：
const inputs = document.querySelectorAll('.readonly');
inputs.forEach((input) => {
input.setAttribute('readOnly', true);
});
上面的代码会找到所有带有readonly类名的input元素，然后将它们的readOnly属性设置为true。
## 总结
总结
以上是使用CSS和JavaScript设置input元素为不可编辑的几种方法。每种方法都有自己的优缺点和用途。对于需要严格控制表单输入的情况，建议使用disabled或readOnly属性。对于需要动态地控制表单输入的情况，可以使用JavaScript处理。
在使用这些技术时，请注意不要给用户带来负面影响，例如让他们难以选择和复制文本等。