HTML - contenteditable 属性_HTML 菜鸟教程

HTML contenteditable 属性是一个全局属性，用于指定元素的内容是否可编辑。

如果未在任何元素上定义 contenteditable 属性，则它将从父元素继承它。因此，如果元素的父元素是可编辑的，则该元素是可编辑的。如果给出的属性没有值，例如，则其值将被视为空字符串。


<label contenteditable>内容。。。 </label>

语法


<element contenteditable = " true | false " >

此属性接受二进制值，无论是 true 还是 false

适用于

由于它是一个全局属性，因此所有元素都接受此属性，因此也总是有异常。例如<p>、<article>、<footer>、<div>、<span>等。

HTML contenteditable 属性的示例

下面的示例将说明 HTML contenteditable 属性，我们应该在哪里以及如何使用此属性！

可编辑段落元素

在以下示例中，我们创建一个段落元素并设置该元素，如果单击该元素，则会看到文本是可编辑的。contenteditable="true"


<!DOCTYPE html>
<html>
<head>
	 <title>HTML contenteditable Attribute</title>
</head>
<body>
	 <h1>QikepuCom</h1>
	 <h3>HTML contenteditable Attribute</h3>
	 <p contenteditable="true">
			QikepuCom: 
			A computer science portal for QikepuCom,
			article and, CS courses!
	 </p>
</body>
</html>

Blockquote & Cite 内容可编辑

在以下示例中，让我们查看此 HTML 文档中 content editable 属性的用法，如下所示。


<!DOCTYPE html>
<html>

<head>
		<style>
				blockquote {
						background: #eee;
						border-radius: 5px;
						margin: 16px 0;
						padding: 10px;
				}

				cite {
						margin: 10px 30px;
						font-weight: bold;
						float: right;
				}
		</style>
</head>

<body>
		<blockquote contenteditable="true">
				<p>Write down todays Quote</p>
		</blockquote>
		<cite contenteditable="true">
			Your Name
	 </cite>
</body>

</html>

具有空值的 Contenteditable

在以下示例中，我们将创建一个 HTML 文档并使用 contenteditable 属性及其值 false 和 empty，如下所示


<!DOCTYPE html>
<html>

<head>
		<style>
				blockquote {
						background: #eee;
						border-radius: 5px;
						margin: 16px 0;
						padding: 10px;
				}

				cite {
						margin: 10px 30px;
						font-weight: bold;
						float: right;
				}
		</style>
</head>

<body>
		<blockquote contenteditable>
				<p>Write down todays Quote</p>
		</blockquote>
		<cite contenteditable="false">
			QikepuCom
	 </cite>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - 全局 class 属性 HTML - data-* 属性 >>