Content editable change event in jQuery

jQuery contenteditable attribute: In this tutorial, we will learn about the content editable change event in jQuery with the help of an example. By Pratishtha Saxena, on July 23, 2023

jQuery provides us with a variety of functions, methods, and other features that just help to make complex tasks simpler and easier to handle. Here, we are coming up with a similar kind of jQuery feature, i.e., Content Editable Change Event.

jQuery Content Editable Change Event

The contenteditable is an attribute that is paired with HTML elements for execution. This allows a user to change or edit the content of the HTML document. As we know, the user can not change the content visible usually, but when the contenteditable attribute is defined for an HTML element, then the user can do so. jQuery is used along with this to handle the changed events and perform actions as needed.

The contenteditable attribute has to be set to 'true' in order to allow the user to make changes to the displayed content.

Syntax

Following is the syntax of contenteditable attribute:

<p contenteditable="true"></p>

Now, see the following example which explains how this whole thing works. The <p> tag has the attribute contenteditable attribute which allows it to be changed by the user. As soon as the user changes or edits even a single character on this element, the console will show the actions accordingly.

jQuery Example to Content Editable Change Event

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Content Editable Change Events jQuery</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <p contenteditable="true">This content is editable.</p>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('p').on('input', function() {
            var editedContent = $(this).html();
            $(console.log('Content changed to :', editedContent));
        });
    })
  </script>
</html>

The output of the above example is:

Example (1) | Content editable change event

Example (2) | Content editable change event

jQuery $(document).ready and UpdatePanels

How to remove disabled attribute using jQuery?