HTML :: Атрибут contenteditable

В HTML универсальный атрибут contenteditable (от англ. editable content – редактируемое содержимое) разрешает редактирование содержимого элемента прямо в браузере.

Несмотря на то, что атрибут contenteditable является универсальным, в элементах типа «input» или «textarea» он не работает, соответственно и значение атрибута родительского элемента не наследуется. Для этих целей в таких элементах используются свои атрибуты.

Синтаксис

	<elem contenteditable="true|false">...</elem>

Значения

true или пустая строка - редактирование элемента разрешено;
false - отключает режим редактирования элемента.

Разрешается вообще не указывать значение. Если атрибут присутствует, то подразумевается значение "true", иначе используется значение по умолчанию.

Значение по умолчанию: значение элемента «html» принимается за false, другие элементы наследуют значение родительского элемента.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты/contenteditable

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html contenteditable="true">
<head>
    <meta charset="utf-8">    
    <title>contenteditable|Пример №1</title>
</head>
<body>
    		
	<p>
        Содержимое данного абзаца доступно для 
	    редактирования, т.к. по умолчанию универсальный атрибут
	    contenteditable наследует значение родительского элемента!
	</p>

	<p contenteditable="false">
       Содержимое данного абзаца не доступно для 
	   редактирования, т.к. универсальный атрибут
	   contenteditable имеет значение "false"!
    </p>

</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>contenteditable|Пример №2</title>
</head>
<body>
    		
	<p>
        Содержимое данного абзаца не доступно для 
	    редактирования, т.к. по умолчанию универсальный атрибут
	    contenteditable наследует значение родительского элемента!
	</p>

	<p contenteditable="true">
       Содержимое данного абзаца доступно для 
	   редактирования, т.к. универсальный атрибут
	   contenteditable имеет значение "true"!
    </p>

</body>
</html>

Пример №2

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>contenteditable|Пример №3</title>
</head>
<body>
    		
<textarea contenteditable="false">
Здесь атрибут contenteditable 
работать не будет!
</textarea>
    
</body>
</html>

Пример №3