JS властивість Element.contentEditable

Загальний опис

Властивість contentEditable є властивістю об'єкта HTMLElement у JavaScript, яка вказує, чи може користувач змінювати вміст елементу. Основна суть цієї властивості полягає в тому, що вона дозволяє зробити будь-який елемент редагованим користувачем, надаючи можливість вносити зміни безпосередньо на сторінці.

Однією з основних сфер застосування властивості contentEditable є створення інтерактивних веб-додатків, таких як редактори тексту, блоги або форуми, де користувачі можуть вносити зміни безпосередньо на сторінку. Вона також може бути корисною при розробці інтерфейсів, де потрібно надати користувачам можливість змінювати вміст деяких елементів, наприклад, розташування або розмір текстових блоків.

Для використання властивості contentEditable найпростіший варіант - просто встановити її значення на true для елементу, який ви хочете зробити редагованим:

const editableElement = document.getElementById('editable-element');
editableElement.contentEditable = true;

Після цього користувач може клікнути на цей елемент і вносити будь-які зміни в його вміст прямо на сторінці. Варто зазначити, що значення contentEditable може бути різними типами даних, такими як true, false або "inherit", в залежності від потреб вашого додатка.

Крім того, властивість contentEditable може бути динамічно змінена за допомогою JavaScript, що робить її дуже гнучкою для використання у складних сценаріях. Наприклад, ви можете змінювати стан редагування елемента залежно від дій користувача або інших умов:

const toggleEditable = () => {
    const editableElement = document.getElementById('editable-element');
    editableElement.contentEditable = !editableElement.contentEditable;
};

// При кліку на кнопку змінюємо стан редагування елемента
document.getElementById('toggle-button').addEventListener('click', toggleEditable);

У цьому прикладі ми використовуємо функцію toggleEditable(), яка змінює стан редагування елемента при кожному кліку на кнопку.

Загалом, властивість contentEditable є потужним інструментом для створення інтерактивних веб-додатків та надання користувачам можливості змінювати вміст сторінки безпосередньо на ній. Її гнучкість і легкість використання роблять її важливим елементом при розробці різноманітних веб-інтерфейсів.

Порада:	Для початківців: розуміння того, що властивість `contentEditable` дозволяє робити елемент редагованим без необхідності використання спеціальних редакторів. Наприклад, ви можете використовувати її для створення власного текстового редактора прямо в браузері.
Порада:	Досвідченим програмістам: варто пам'ятати, що, хоча `contentEditable` дає можливість редагування, потрібно докладати зусиль для забезпечення безпеки та валідації введеного користувачем контенту. Необхідно враховувати потенційні загрози безпеки, такі як виконання скриптів у введеному контенті.
Порада:	Порада для початківців: перед використанням `contentEditable` важливо вивчити його особливості та обмеження. Наприклад, різні браузери можуть по-різному обробляти цю властивість, тому слід провести тестування на різних платформах.

Синтаксис

Element.contentEditable

Значення

Return

Переглядачі

Переглядач
	1	3	3	9	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

У цьому прикладі ми маємо елемент <div> з ідентифікатором editableContent, який містить деякий текст. За замовчуванням, властивість contentEditable для цього елемента встановлена на false, що означає, що користувач не може редагувати його вміст.

Є також чекбокс "Зробити редагованим", який дозволяє користувачеві зробити вміст елемента editableContent редагованим або нередагованим.

При зміні стану чекбокса, властивість contentEditable для елемента editableContent встановлюється відповідно до вибору користувача. Коли чекбокс вибрано, властивість contentEditable встановлюється на true, що робить вміст елемента редагованим. Коли чекбокс не вибрано, властивість contentEditable встановлюється на false, що робить вміст елемента нередагованим.

Для візуальної демонстрації, коли елемент є редагованим, його фон змінюється на світло-с


  See the Pen <a href="https://codepen.io/css_in_ua/pen/JjVXqwa">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому простому прикладі ми маємо елемент <div>, який має властивість contentEditable встановлену в true, що дозволяє редагувати його вміст. Ми використовуємо подію input, щоб відстежувати зміни вмісту елементу. При кожній зміні вмісту виводиться повідомлення у консоль з новим вмістом елементу.

// HTML розмітка
// <div id="editable" contenteditable="true">Редагований текст</div>

// JavaScript код
const editableElement = document.getElementById("editable");

// Додаємо подію для відстеження змін у вмісті
editableElement.addEventListener("input", function() {
  console.log("Вміст було змінено на:", editableElement.textContent);
});

У цьому складнішому прикладі ми маємо елемент <div>, який містить заголовок <h1> та абзац <p>. Поруч з ним розміщено кнопку, яка перемикає режим редагування. При кліку на кнопку викликається функція toggleEditing(), яка перемикає режим редагування елементу editor. При цьому текст кнопки також змінюється відповідно до поточного стану редагування. Цей приклад демонструє можливості управління режимом редагування елементу з використанням властивості contentEditable.

// HTML розмітка
// <div id="editor" contenteditable="true">
//   <h1>Редактор тексту</h1>
//   <p>Початковий текст</p>
// </div>
// <button id="toggleEditing">Перемикач редагування</button>

// JavaScript код
const editor = document.getElementById("editor");
const toggleButton = document.getElementById("toggleEditing");

// Функція для вмикаання/вимикання режиму редагування
function toggleEditing() {
  editor.contentEditable = !editor.isContentEditable;
  if (editor.isContentEditable) {
    toggleButton.textContent = "Закрити редагування";
  } else {
    toggleButton.textContent = "Відкрити редагування";
  }
}

toggleButton.addEventListener("click", toggleEditing);

JS довідник

JavaScript

Наповнення JS розділу