В этой статье обсуждается, как обрабатывать события изменения контента в JavaScript, и объясняется это с помощью примера.
Как обрабатывать события Contenteditable Change в JavaScript?
Contenteditable — это перечислимый атрибут. Пользователь может вносить изменения в контент исходя из своих требований. Если это разрешено, браузер изменяет свой виджет, чтобы разрешить изменение элементов.
Какие значения допустимы для события изменения, доступного для редактирования?
Contenteditable может принимать любое из этих значений:
- Plaintext-only означает, что исходный текст можно редактировать, хотя форматирование расширенного текста отключено.
- Пустая строка или значение true, что означает, что элемент можно редактировать.
- false, подразумевая, что элемент нельзя редактировать.
Пример
В следующем примере объясняется, как можно использовать редактируемый контент на веб-странице. Давайте посмотрим на код ниже, чтобы лучше понять его:
HTML
Вот HTML-код, который объясняет использование событий изменения контента:
< цитата довольный и редактируемый '=' 'истинный' >
< h3 > РЕДАКТИРУЙТЕ СВОЕ СОДЕРЖАНИЕ ЗДЕСЬ! < / h3 >
< / цитата >
В приведенном выше HTML-коде:
- Тег цитаты создается с атрибутом contenteditable, установленным в значение true. Это позволит редактировать содержимое внутри тега цитаты.
- Внутри тега цитаты присутствует тег h3. Там написано «РЕДАКТИРУЙТЕ СВОЕ СОДЕРЖИМОЕ ЗДЕСЬ!», поскольку оно присутствует внутри
, что означает, что контент может редактироваться пользователем.
CSS
Чтобы сделать наш код визуально привлекательным, мы использовали следующий CSS-код:
цитата {
фон : персиковый слой ;
граница-радиус : 10 пикселей ;
допуск : 10 пикселей ;
}
цитата h3 {
прокладка : 10 пикселей ;
}
В приведенном выше коде CSS:
- Фон тега цитаты имеет персиковый цвет с радиусом границы 10 пикселей и полем 10 пикселей.
- Заголовок h3 внутри цитаты имеет отступ 10 пикселей.
Выход :
Следующий вывод объясняет, как можно редактировать контент с помощью события изменения contenteditable в JavaScript:
Важность редактирования контента
- Повышенная интерактивность, поскольку пользователь может удобно изменять контент.
- Удобная настройка программиста с помощью JavaScript может создавать измененные варианты поведения, такие как автосохранение, запуск различных действий на основе пользовательского ввода.
- Помогает упростить процесс редактирования, позволяя пользователю редактировать динамически без необходимости использования отдельного текстового поля.
Заключение
События изменения содержимого в JavaScript позволяют пользователю изменять содержимое, делая веб-страницу адаптивной и настраиваемой. Это открывает путь к веб-разработке, ориентированной на пользователя, когда пользователь может редактировать контент на веб-странице в режиме реального времени, обеспечивая более оперативное взаимодействие с пользователем. В этой статье обсуждалось, как обрабатывать события изменения содержимого в JavaScript, и объяснялось это с помощью примера.