資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 HTML 文件中建立可編輯內容
在 Html 中，我們可以使用contenteditable屬性來編輯內容，它指定元素內容是否可以由使用者編輯。
contentEditable屬性設定或返回元素內容是否可編輯。
語法
HTML 中可編輯內容的用法/語法為：
<element contenteditable = "true|false">
上述contenteditable屬性有兩個值：true/false。
True 表示元素可編輯。
False 表示元素不可編輯。
示例
以下是如何在 HTML 中建立可編輯內容的示例：
<!DOCTYPE html> <html> <body> <p contenteditable="true">This content is editable. Try to edit it.</p> <p>This is a normal content. It won't edit.</p> </body> </html>
示例
以下是另一個示例，我們將 contenteditable 屬性的值更改為 true：
<!DOCTYPE html>
<html>
<head>
<title>contenteditable attribute</title>
<style>
body {
width: 70%;
text-align: center;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Using contenteditable attribute</h2>
<p contenteditable="true">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>
執行上述示例後，我們可以在一個矩形框中看到一些文字內容。我們還可以編輯矩形框中存在的內容，因為contenteditable屬性的值被設定為 TRUE。
示例
如果將contenteditable屬性的值更改為 false。您將無法編輯文字：
<!DOCTYPE html>
<html>
<head>
<title>contenteditable attribute</title>
<style>
body {
width: 70%;
text-align: center;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Using contenteditable attribute</h2>
<p contenteditable="false">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>
我們無法編輯內容，因為 contenteditable="false" 屬性值已給出：
示例
現在讓我們透過將級聯樣式應用於可編輯內容來檢視一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
.output {
font: 1rem 'Fira Sans', sans-serif;
}
blockquote {
background: orange;
border-radius: 5px;
margin: 16px 0;
}
blockquote p {
padding: 15px;
}
cite {
margin: 16px 32px;
}
blockquote p::before {
content: '\201C';
}
blockquote p::after {
content: '\201D';
}
[contenteditable='true'] {
caret-color: red;
}
</style>
</head>
<body>
<blockquote contenteditable="true">
<p>Edit this content to add your own Text</p>
</blockquote>
<cite contenteditable="true">-- Write your Name Here</cite>
</body>
</html>
更新於： 2023年10月6日
606 次瀏覽
廣告