資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使文字輸入不可編輯
在HTML文件中，<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>元素的只讀屬性指定輸入欄位為只讀。當輸入標記為只讀時，其內容無法更改，但可以複製和突出顯示。
只讀屬性可以用來防止使用者更改值，直到滿足某些條件（例如選擇複選框等）。然後可以使用JavaScript刪除readonly值並使輸入欄位可編輯。
示例
在這個例子中，我們在input元素內使用只讀屬性來使文字輸入不可編輯。
<!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屬性有十一個可能的值，但對於任何HTML元素，三個有效值為none、auto和inherit。
none: 用於停用點選目標，並允許元素定位該元素下方的任何內容。
auto: 預設值。表示元素必須響應指標。
inherit: 使用元素父級的pointer-event值。
示例
在下面的示例中，我們將pointer-event的值設定為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在特定輸入欄位中停用pointer-event屬性，只使其中一個不可編輯。
<!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>
3K+ 瀏覽量
