简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

HTML ContentEditable attribute

Guanhui
Release： 2020-05-22 09:59:07
Original
3340 people have browsed it

HTML ContentEditable attributeThe contentEditable attribute in HTML can turn on the editable state of certain elements. Maybe you have never used the contentEditable attribute, or even heard of it. The contentEditable function is quite magical. It can make a div or an entire web page. And span and other elements are set to be writable. Our most commonly used input text content is input and textarea. After using the contentEditable attribute, you can enter content in div, table, p, span, body, and many other elements.

Note: When the contenteditable attribute is not set in the element, the element will inherit from the parent element.

Browser support

##Version11.05.53.03.210.6
Browser Chrome Internet Explorer Firefox Safari Opera
Note: The contenteditable attribute is new to HTML5.

Syntax

<element contenteditable="true|false">
Copy after login

Attribute value

ValueDescriptiontrueSpecifies that the element is editablefalseThe specified element is not editable

Example

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ContentEditable</title>
 </head>
 <body>
     <div contenteditable="true">
         你好！世界！
     </div>
 </body>
 </html>
Copy after login

HTML ContentEditable attribute

Recommended tutorial: "

HTML Tutorial"

The above is the detailed content of HTML ContentEditable attribute. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html
source：php.cn
Previous article：How to implement drop-down menu in HTML Next article：How long does it take to learn HTML5 by yourself?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！