如何使文本输入框不可编辑

htmlweb developmentfront end technology更新于 2025/3/27 1:16:17

在 HTML 文档中，<input> 标签用于表示表单输入控件。大多数情况下，input 标签在 <form> 元素内使用，用于声明允许用户输入数据的输入控件。根据属性类型的不同，输入字段可以有多种类型。

Input 标签是一个仅包含属性的空白元素。可以使用 <label> 标签定义输入元素的标签。通过设置适当的 type 属性，它可以用于表示文本字段、复选框、下拉菜单、按钮和其他输入框。value 属性用于指定输入元素的初始值。

示例

以下代码是一个简单的文本输入示例。

<!DOCTYPE html>
<html>
<head>
<title>Text input in HTML</title>
</head>
<body>
<input type="text" value="This is the initial text">
</body>
</html>

即使初始文本已使用 value 属性指定，它仍然可以被编辑。在本教程中，我们将讨论两种使输入元素的文本不可编辑的方法。

使用"readonly"属性

在 HTML 中，<input> 元素的 readonly 属性指定输入字段为只读。当输入被标记为只读时，其内容无法更改，但可以复制和高亮显示。

readonly 属性可用于阻止用户更改值，直到满足某些条件(例如选中复选框等)。然后，可以使用 JavaScript 移除 readonly 值，并使输入字段可编辑。

示例

在本例中，我们在输入元素中使用 readonly 属性，使文本输入不可编辑。

<!DOCTYPE html>
<html>
<head>
    <title>How to Make the Text Input Non-Editable</title>
    <style>
        div{
            width:500px;
            height:120px;
            padding:10px;
            margin:10px;
            background-color:lightgreen;
        }
        p{
            color:white;
            font-size:20px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div>
        <p>The text field contains non-editable text. However, the text can be copied or highlighted. </p>
        <input type="text" value="Non Editable Text" readonly>
    </div>
</body>
</html>

示例

在此示例中，我们将使用 JavaScript 函数内的 readonly 属性，通过 onclick 事件使文本字段不可编辑。

<!DOCTYPE html>
<html>
<head>
    <title>How to Make the Text Input Non-Editable</title>
    <style>
        #sampleinput{
            width:300px;
            margin-top:20px;
        }
        #btn1,
        #btn2{
            width:110px;
            height:30px;
            border-radius:10px;
            background-color:lightsalmon;
            color:white;
            font-weight:bold;
            cursor:pointer;
        }
        #btn1:hover,
        #btn2:hover{
            background-color:red;
        }
        div{
            width:350px;
            height:120px;
            background-color:oldlace;
            padding:10px 15px 15px 20px;
        }
    </style>
</head>
<body>
    <div>
    <input type="text" id="sampleinput"/><br><br>
    <input type="button" id="btn1" value="Enable Editing" onclick="enableEdit()"/>
    <input type="button" id="btn2" value="Disable Editing" onclick="disableEdit()"/>
    </div>
    <script>
        function enableEdit () {
            var sampleinput = document.getElementById("sampleinput");
            sampleinput.value = "The text can now be edited.";
            sampleinput.disabled = false;
        }
        function disableEdit () {
            var sampleinput= document.getElementById("sampleinput");
            sampleinput.value = "This text is non-editable";
            sampleinput.disabled = true;
        }
    </script>
</body>
</html>

使用 CSS pointer-events 属性

pointer-events 属性控制 HTML 元素如何响应鼠标/触摸事件，包括 CSS 悬停/活动状态、JavaScript 点击/轻触事件以及光标是否可见。它指定特定图形元素在哪些条件下(如果有)可以成为指针事件的目标。

pointer-events 属性有 11 个可能的值，但对于任何 HTML 元素，有效值只有三个:none、auto 和 inherit。

none: 用于停用点击目标，并允许元素定位该元素下方的任何内容。
auto: 这是默认值。它表示元素必须响应指针事件。
继承: 它使用元素父级的指针事件值。

示例

在下面的示例中，我们将指针事件的值设置为"none"，以停止指针事件，并最终使文本字段不可编辑。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Make the Text Input Non-Editable</title>
    <style>
      body {
        text-align: center;
        background-color:whitesmoke;
      }
      .inputField {
        pointer-events: none;
        width:200px;
      }
      div{
          width:450px;
          height:60px;
          margin:20px;
          padding:20px;
          background-color:lavenderblush;
          border:2px solid plum;
      }
    </style>
  </head>
  <body>
    <div>
    Non-Editable Text Field:
    <input class="inputField" name="input" value="Pointer event has been disabled">
    <br><br> 
    Non-Editable Text Field:
    <input class="inputField" name="input" value="Pointer event has been disabled">
    </div>
  </body>
</html>

示例

在此示例中，我们将包含两个输入文本字段，并通过使用其类名或 ID 禁用该特定输入字段中的指针事件属性，仅使其中一个不可编辑。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Make the Text Input Non-Editable</title>
    <style>
      body {
        text-align: center;
        background-color:whitesmoke;
      }
      .inputField2{
        pointer-events: none;
      }
      input{
          width:250px;
      }
      div{
          width:450px;
          height:60px;
          margin:20px;
          padding:20px;
          background-color:beige;
          border:2px solid saddlebrown;
      }
    </style>
  </head>
  <body>
    <div>
    Editable Text Field:
    <input class="inputField1" name="input" value="Pointer event has not been disabled here.">
    <br><br> 
    Non-Editable Text Field:
    <input class="inputField2" name="input" value="Pointer event has been disabled here.">
    </div>
  </body>
</html>