数据结构
网络
关系型数据库管理系统 (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"` 属性值已设置。
示例
现在让我们通过应用层叠样式表 (CSS) 来查看可编辑内容的示例：
<!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 次浏览
广告