数据结构
网络
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 次浏览
广告