首頁 >web前端 >css教學 >css怎麼將文字方塊設定為唯讀

css怎麼將文字方塊設定為唯讀

王林
王林原創
2021-06-08 16:15:195428瀏覽

css將文字方塊設定為唯讀的方法是,在input文字方塊中新增readonly屬性即可。 readonly屬性是一個布林屬性,該屬性用來規定輸入欄位是唯讀的。

css怎麼將文字方塊設定為唯讀

本文操作環境:windows10系統、css 3、thinkpad t480電腦。

readonly屬性是HTML中的一個布林屬性,該屬性用來規定輸入欄位是唯讀的。

我們知道只讀字段是不能修改的,但是使用者仍然可以使用 tab 鍵切換到該字段,也可以選取或拷貝其文字。

readonly 屬性可以防止使用者對值進行修改,直到滿足某些條件為止(例如選取了一個複選框)。然後,需要使用 JavaScript 消除 readonly 值,將輸入欄位切換到可編輯狀態。

注意:所有主流瀏覽器都支援 readonly 屬性。

範例:

帶有唯讀輸入欄位的 HTML 表單。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<form action="demo_form.php">
  Email: <input type="text" name="email"><br>
  Country: <input type="text" name="country" value="Norway" readonly><br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運行結果:

css怎麼將文字方塊設定為唯讀

相關影片分享:css影片教學

以上是css怎麼將文字方塊設定為唯讀的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn