正文

如何设置JavaScript按钮只读，让用户无法修改输入内容？

/0 浏览量
0924

在网页开发中，有时候我们需要设置一个按钮，让用户只能查看输入框中的内容，而不能修改它。这可以通过JavaScript和CSS来实现。以下是一步一步的指导，帮助你设置一个只读的按钮。

步骤一：HTML结构

首先，我们需要一个输入框和一个按钮。这里是一个简单的HTML示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>只读按钮示例</title>
</head>
<body>
  <input type="text" id="read-only-input" value="这是一个只读输入框">
  <button id="read-only-button">查看内容</button>
  <script src="script.js"></script>
</body>
</html>

步骤二：CSS样式

接下来，我们可以通过CSS设置按钮的样式，使其看起来像是禁用了。以下是CSS代码：

button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

将这段CSS代码放入你的HTML文件中的<head>标签内，或者将其放入一个单独的CSS文件中，并在HTML中通过<link>标签引入。

步骤三：JavaScript逻辑

现在我们需要用JavaScript来控制按钮的只读属性。以下是JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('read-only-button');
  var input = document.getElementById('read-only-input');

  button.addEventListener('click', function() {
    if (input.readOnly) {
      input.readOnly = false;
      button.disabled = false;
    } else {
      input.readOnly = true;
      button.disabled = true;
    }
  });
});

这段代码中，我们首先获取按钮和输入框的DOM元素。然后，我们为按钮添加一个点击事件监听器。当按钮被点击时，我们检查输入框的readOnly属性。如果它已经被设置为只读，那么我们将其重置为可编辑，并启用按钮。如果输入框不是只读的，我们将其设置为只读，并禁用按钮。

完整示例

以下是整合了HTML、CSS和JavaScript的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>只读按钮示例</title>
<style>
button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}
</style>
</head>
<body>
  <input type="text" id="read-only-input" value="这是一个只读输入框">
  <button id="read-only-button">查看内容</button>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var button = document.getElementById('read-only-button');
      var input = document.getElementById('read-only-input');

      button.addEventListener('click', function() {
        if (input.readOnly) {
          input.readOnly = false;
          button.disabled = false;
        } else {
          input.readOnly = true;
          button.disabled = true;
        }
      });
    });
  </script>
</body>
</html>

通过以上步骤，你就可以创建一个只读的按钮，让用户无法修改输入框中的内容了。

-- 展开阅读全文 --