开启

浏览器(liú lǎn qì)F12 console输入

document.body.contentEditable='true';

return "true"

则表示，开启网页文字编辑状态，可随意在网页上编辑任何标签内的文字了，省去了鼠标(shǔ biāo)反复查找元素的方法。

::before伪元素内的文字除外。

关闭

编辑完后关闭状态console输入

document.body.contentEditable='false';

return "false"

则表示，编辑状态已关闭。

关于属性

contenteditable属性为枚举(méi jǔ)类型，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许使用者编辑。

以下这段英语在正常状态下可随意编辑：

Our destiny offers not the cup of despair,but the chalice of opportunity.So let us seize it,not in fear,but in gladness.

—— R.M. Nixon.

浏览器兼容性

ChromeEdgeFirefoxIEOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
contenteditable✓1235.59✓✓✓4✓✓✓
contenteditable="caret"✓≤79✗✗✓✗✓✓✗✓✗✓
contenteditable="events"✓≤79✗✗✓✗✓✓✗✓✗✓
contenteditable="plaintext-only"✓≤79✗✗✓✓✓✓✗✓✓✓
contenteditable="typing"✓≤79✗✗✓✗✓✓✗✓✗✓

本文作者：Catyo

本文链接：https://blog.catyo.cn/archives/1690/

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。