Атрибут contenteditable|справочник HTML
http://belarusweb.net
Основы создания сайтов

Атрибут contenteditable

Универсальный атрибут contenteditable разрешает редактирование содержимого элемента прямо в браузере.

Синтаксис

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

Значения

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

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

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

Примечания

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

Примеры

<!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

<!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

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

Пример №3

W3C

Посмотреть информацию о данном атрибуте можно также на официальном сайте W3C здесь.