极客笔记HTML 如何使文本输入框不可编辑
在HTML文档中，标签用于表示表单输入控件。在大多数情况下，input标签是在元素内部使用的，用于声明允许用户输入数据的输入控件。根据属性类型的不同，输入字段可以是不同类型的。
Input标签是一个只有属性的空元素。可以使用标签来定义输入元素的标签。通过设置适当的 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将输入字段设置为可编辑。
示例
在这个示例中，我们在输入元素中使用只读属性来使文本输入不可编辑。
<!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的hover/active状态、JavaScript的click/tap事件以及光标的可见性。它指定了特定图形元素可能成为指针事件目标的条件（如果有的话）。
尽管pointer-events属性有11个可能的值，但对于任何HTML元素，只有三个有效值：none、auto和inherit。
- none: 用于禁用点击目标，允许元素对准该元素下方的任何元素。
-
auto: 默认值。表示一个元素必须对指针做出响应。
-
inherit: 使用元素父级的pointer-event值。
示例
在下面的示例中，我们将将pointer-events的值设置为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>