在网页设计中，表单文本框是用户输入数据的重要元素。有时候，我们可能需要某些文本框只供展示，不允许用户进行编辑，以避免数据被意外修改。本文将详细介绍如何在HTML和JavaScript中实现这一功能。
HTML部分
首先，我们需要创建一个文本框。在HTML中，可以使用
标签的
type
属性设置为
text
来创建一个文本框。
在上面的代码中，我们创建了一个名为
myTextBox
的文本框，并给它设置了一个初始值。
禁用编辑功能
为了禁用编辑功能，我们可以通过CSS来设置文本框的
readonly
属性。当
readonly
属性被设置为
true
时，文本框将只读，用户无法编辑。
这样，文本框就变成了只读状态，用户无法修改其中的内容。
JavaScript部分
如果需要通过JavaScript来控制文本框的只读状态，可以使用
setAttribute
方法来动态设置
readonly
属性。
// 获取文本框元素
var textBox = document.getElementById(‘myTextBox’);
// 设置文本框为只读
textBox.setAttribute(‘readonly’, ‘readonly’);
// 如果需要再次启用编辑功能，可以取消readonly属性
// textBox.removeAttribute(‘readonly’);
综合示例
以下是一个综合示例，展示了如何通过HTML和JavaScript来控制文本框的只读状态。
在这个示例中，我们创建了一个按钮，当点击按钮时，会切换文本框的只读状态。同时，我们通过CSS设置了文本框的背景颜色，以便于区分只读和可编辑状态。
通过以上方法，您可以轻松地设置表单文本框的禁用编辑功能，避免意外修改。希望本文对您有所帮助！