在此代码中，我们可以找到两种使 <input> 元素的文本不可编辑的方法。
我们可以在 <input> 标签上使用 readonly 属性或者添加一些 CSS。
使用 CSS 指针事件属性的解决方案
使输入文本不可编辑的第二种方法是使用设置为“none”的 CSS 指针事件属性，这将停止指针事件。
使用 CSS 指针事件属性使文本输入不可编辑的示例：
<!DOCTYPE html>
<html>
<head>
<title> 文档的标题</title>
<style>
body {
text-align: center;
}
.inputField {
pointer-events: none;
}
</style>
</head>
<body>
Non-Editable:
<input class="inputField" name="input" value="onitroad">
<br>
<br> Non-Editable:
<input class="inputField" name="input" value="Non editable input">
</body>
</html>
在上面的例子中，我们有两个 <input> 元素，它们都是不可编辑的，而在下一个例子中，只有一个 <input> 元素是不可编辑的。
使用 CSS 指针事件属性制作可编辑和不可编辑文本输入的示例：
<!DOCTYPE html>
<html>
<head>
<title> 文档的标题</title>
<style>
body {
text-align: center;
}
.input1 {
pointer-events: none;
}
</style>
</head>
<body>
Non-Editable:
<input class="input1" name="input" value="onitroad">
<br>
<br> Editable:
<input class="input2" name="input" value="onitroad">
</body>
</html>
使用 HTML readonly 属性的解决方案
readonly 属性指定该值不能被修改，尽管用户仍然可以使用 Tab 键切换到它、突出显示它并复制内容。
使用 HTML readonly 属性使文本输入不可编辑的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<input type="text" value="onitroad" class="left field" readonly>
</body>
</html>
readonly 属性仅对以下输入类型有效：文本、电子邮件、网址、电话、号码、密码、日期和时间。
日期：2020-06-02 22:15:10 来源：oir作者：oir