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, оскільки це може призвести до проблем безпеки, якщо користувачі можуть вводити небажаний або небезпечний вміст. Тому рекомендується завжди валідувати та очищувати введений користувачем вміст перед збереженням або відправкою на сервер.
| Порада: | Пам'ятайте, що |
| Порада: | Завжди валідуйте та очищуйте введений користувачем вміст перед збереженням або відправкою на сервер. Це допоможе уникнути проблем безпеки, пов'язаних з небажаним або небезпечним вмістом, який можуть вводити користувачі. |
| Порада: | Ви можете використовувати |
Синтаксис
Element.isContentEditableЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
4 |
3 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми маємо елемент <div> з ідентифікатором editableDiv, який містить деякий текст. За замовчуванням його властивість contenteditable встановлена на false, що означає, що користувач не може редагувати його вміст.
Також присутня кнопка <button> з ідентифікатором toggleEditButton. При натисканні на цю кнопку викликається функція toggleEditMode(), яка змінює значення властивості contentEditable елемента editableDiv на протилежне.
Коли властивість contentEditable елемента editableDiv має значення true, навколо нього відображається синя пунктирна рамка (завдяки CSS-стилям), що візуально вказує на те, що користувач може редагувати його вміст.
У цьому прикладі ми отримуємо елемент з ідентифікатором "myElement" за допомогою методу document.getElementById(). Потім ми перевіряємо властивість isContentEditable цього елемента. Якщо властивість дорівнює true, це означає, що вміст елемента можна безпосередньо редагувати користувачем. В іншому випадку, якщо властивість дорівнює false, вміст елемента не можна редагувати. Відповідне повідомлення виводиться у консоль.
// Отримуємо елемент з ID "myElement"
const myElement = document.getElementById('myElement');
// Перевіряємо, чи є елемент доступним для редагування
if (myElement.isContentEditable) {
console.log('Елемент доступний для редагування');
} else {
console.log('Елемент не доступний для редагування');
}У цьому прикладі ми створюємо функцію toggleEditMode, яка приймає елемент як аргумент і перемикає його режим редагування. Властивість isContentEditable елемента змінюється на протилежне значення за допомогою оператора !. Також ми змінюємо стилі елемента, щоб візуально відобразити, чи він доступний для редагування. Якщо елемент доступний для редагування, ми встановлюємо синю пунктирну рамку навколо нього та змінюємо курсор на текстовий. Якщо елемент не доступний для редагування, ми скидаємо ці стилі до їхніх значень за замовчуванням.
// Функція для перемикання режиму редагування елемента
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);
}
});