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

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

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

Властивість isContentEditable може набувати одного з трьох значень: true, false або inherit. Якщо значення встановлено на true, вміст елемента стає редагованим, і користувач може змінювати його за допомогою клавіатури або миші. Якщо значення false, вміст елемента не можна редагувати. Нарешті, якщо значення inherit, елемент успадковує значення властивості isContentEditable від свого батьківського елемента.

Розглянемо приклад використання isContentEditable:

<div id="editable" contenteditable="true">Натисніть тут, щоб редагувати цей текст</div>

У цьому прикладі ми маємо div з ідентифікатором editable, для якого встановлено властивість contenteditable="true". Це робить вміст елемента редагованим, і користувач може змінювати текст безпосередньо на веб-сторінці.

Ви також можете змінювати значення isContentEditable за допомогою JavaScript:

const editableDiv = document.getElementById('editable');
editableDiv.contentEditable = true; // Робить вміст редагованим
editableDiv.contentEditable = false; // Робить вміст нередагованим

Крім того, ви можете використовувати isContentEditable для перевірки, чи є елемент редагованим:

const editableDiv = document.getElementById('editable');
if (editableDiv.isContentEditable) {
  console.log('Елемент редагований');
} else {
  console.log('Елемент не редагований');
}

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

Однак слід бути обережними з використанням isContentEditable, оскільки це може призвести до проблем безпеки, якщо користувачі можуть вводити небажаний або небезпечний вміст. Тому рекомендується завжди валідувати та очищувати введений користувачем вміст перед збереженням або відправкою на сервер.

правити

Порада

Завжди валідуйте та очищуйте введений користувачем вміст перед збереженням або відправкою на сервер. Це допоможе уникнути проблем безпеки, пов'язаних з небажаним або небезпечним вмістом, який можуть вводити користувачі.

автор: Bond правити

Порада

Пам'ятайте, що isContentEditable впливає не лише на текст, але й на інші вкладені елементи, такі як зображення та інші компоненти. Це дозволяє створювати складніші редагування, де користувачі можуть переміщати, змінювати розмір або видаляти різні компоненти на веб-сторінці.

автор: Bond правити

Порада

Ви можете використовувати isContentEditable для перевірки, чи є елемент редагованим. Це корисно для реалізації різної логіки залежно від стану редагування елемента. Наприклад:

const editable = document.getElementById('editable');
if (editable.isContentEditable) {
  // Логіка для редагованого елемента
} else {
  // Логіка для нередагованого елемента
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.isContentEditable

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	3	≤12.1	12	5.5

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент з ID "myElement"
const myElement = document.getElementById('myElement');

// Перевіряємо, чи є елемент доступним для редагування
if (myElement.isContentEditable) {
  console.log('Елемент доступний для редагування');
} else {
  console.log('Елемент не доступний для редагування');
}

<div id="editableDiv">Демонстраційний елемент</div>

// Функція для перемикання режиму редагування елемента
function toggleEditMode(element) {
  element.isContentEditable = !element.isContentEditable;
  element.style.outline = element.isContentEditable ? '2px dashed blue' : 'none';
  element.style.cursor = element.isContentEditable ? 'text' : 'default';
}

// Отримуємо елемент з ID "editableDiv"
const editableDiv = document.getElementById('editableDiv');

// Додаємо обробник події для клавіші "E"
document.addEventListener('keydown', function(event) {
  if (event.key === 'e') {
    toggleEditMode(editableDiv);
  }
});