contenteditable
global attribute
is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The attribute must take one of the following values:
true
或
空字符串
, which indicates that the element is editable.
false
, which indicates that the element is not editable.
If the attribute is given without a value, like
<label contenteditable>Example Label</label>
, its value is treated as an empty string.
If this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is editable if its parent is editable.
Note that although its allowed values include
true
and
false
, this attribute is an
enumerated
one and not a
布尔
one.
You can set the color used to draw the text insertion
caret
with the CSS
caret-color
特性。
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
在该规范中的 contenteditable 定义。 |
实时标准 | No change from latest snapshot, HTML 5.2 |
|
HTML 5.2
在该规范中的 contenteditable 定义。 |
推荐 | 快照 HTML 实时标准 , no change from HTML 5.1 |
|
HTML 5.1
在该规范中的 contenteditable 定义。 |
推荐 | 快照 HTML 实时标准 , no change from HTML5 |
|
HTML5
在该规范中的 contenteditable 定义。 |
推荐 | 快照 HTML 实时标准 ,初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contenteditable
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 3 | IE 完整支持 5.5 | Opera 完整支持 9 | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
contenteditable="caret"
实验性
|
Chrome 完整支持 Yes | Edge 完整支持 ≤79 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 Yes | Safari 不支持 No | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 不支持 No | Opera Android 完整支持 Yes | Safari iOS 不支持 No | Samsung Internet Android 完整支持 Yes |
contenteditable="events"
实验性
|
Chrome 完整支持 Yes | Edge 完整支持 ≤79 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 Yes | Safari 不支持 No | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 不支持 No | Opera Android 完整支持 Yes | Safari iOS 不支持 No | Samsung Internet Android 完整支持 Yes |
contenteditable="plaintext-only"
实验性
|
Chrome 完整支持 Yes | Edge 完整支持 ≤79 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 不支持 No | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
contenteditable="typing"
实验性
|
Chrome 完整支持 Yes | Edge 完整支持 ≤79 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 Yes | Safari 不支持 No | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 不支持 No | Opera Android 完整支持 Yes | Safari iOS 不支持 No | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
实验。期望将来行为有所改变。
HTMLElement.contentEditable
and
HTMLElement.isContentEditable
caret-color
property
HTMLElement
input
event
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<bgsound>
<big>
<blink>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<content>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<element>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<image>
<img>
<input>
<ins>
<isindex>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<listing>
<main>
<map>
<mark>
<marquee>
<menu>
<menuitem>
<meta>
<meter>
<multicol>
<nav>
<nextid>
<nobr>
<noembed>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<plaintext>
<pre>
<progress>
<q>
<rb>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<shadow>
<slot>
<small>
<source>
<spacer>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
<xmp>
<input>
类型
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">