在前端开发中，常常需要对表单元素进行各类操作。其中，“只读”是一个常用的属性，它可以让用户看到表单内容，但却无法编辑或修改。接下来，我们将介绍如何添加“只读”属性的input输入框。
HTML中添加readonly属性
最简单的方法是在HTML中添加readonly属性。例如：
<input type="text" name="username" value="ChatGPT" readonly>
这样，输入框就会变成只读状态，用户无法修改其中的内容。需要注意的是，这个属性是只读的，也就是说，后期不能通过JS来修改。
动态设置readonly属性
如果需要根据不同的条件来动态设置readonly属性，那么就需要使用JavaScript来实现了。以下是一段简单的示例代码：
-- -------------------- ---- ------- ------ ----------- --------------- -------- -------------- ------- ------------------------------------- -------- -------- ------------- - --- ----- - ------------------------------------ -------------- - ----- - ---------
上述代码定义了一个id为username的输入框和一个按钮。当用户点击按钮时，setReadonly()函数就会被调用，并将readOnly属性设置为true。此时，输入框变为只读状态。
需要注意的是，虽然我们将readOnly属性设置为true，但是并没有在HTML标签中添加readonly属性。这是因为在JavaScript中，我们可以直接使用对象的属性来修改DOM元素的属性。
通过CSS实现只读效果
除了以上两种方法外，我们还可以通过CSS来实现只读效果。具体做法是给输入框设置一个背景色，并且禁用所有编辑操作。示例代码如下：
<input type="text" name="username" value="ChatGPT" id="username">
<style>
#username {
background-color: #f8f8f8;
cursor: not-allowed;
}
</style>在这个例子中，我们给输入框设置了背景色，并且将鼠标样式设置为not-allowed，这样用户就无法对输入框进行任何编辑操作了。需要注意的是，虽然看起来像只读状态，但是实际上用户仍然可以通过键盘复制或剪切操作来获取其中的内容。
总结
本文介绍了三种方法来实现只读输入框：HTML中添加readonly属性、动态设置readOnly属性和通过CSS样式实现。不同的方法适用于不同的场景，在实际开发中可以根据需要进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8819
