Skip to content
Related Articles

Related Articles

Content editable change event in jQuery

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 24 Jul, 2019
View Discussion
Improve Article
Save Article

In General, jQuery provides various function to handle selectors, selector properties and even documents, etc.
Whereas here using jquery change event for content editable.

jQuery Change Event:
It occurs when the value of an element is changed also this event is fired immediately when the user makes a selection with the mouse or when the field loses focus.

Syntax:

$(selector).change(function callback);

Content Editable:
Content Editable is mainly a attribute for all HTML elements .
When this attribute is true then that element will display editable content.
When it is false the content editable disabled.

Attribute:

contenteditable="true"

Example 1:
Let’s take an example program to check the element is editable or has attribute “contenteditable” which is set to true or false using jQuery change event.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
  
    <style>
        div {
            padding: 20px;
            outline: none;
        }
          
        p {
            color: grey;
            outline: none;
            padding: 20px;
        }
    </style>
</head>
  
<body>
  
    <div>
        <h1>
          Welcome to GeeksforGeeks
      </h1></div>
    <p contenteditable="true">
      Welcome to GeeksforGeeks
  </p>
  
    <script>
        //checking div tag as attribute contenteditable 
        $(document).ready(function() {
            $("div").change(function() {
                var conattr = $(this).attr('contenteditable');
                if (typeof conattr !== typeof undefined && conattr !== false) {
                    //if div tag as attribute contenteditable 
                    $(this).css('border', 'solid 2px red');
                } else {
                    //if doesn't have div tag as attribute contenteditable 
                    $(this).css({
                        "border": "solid 2px green",
                        "border-radius": "34px"
                    }).attr('contenteditable', 'true')
  
                }
            }).trigger("change");
        });
        //checking p tag as attribute contenteditable  
        $(document).ready(function() {
            $("p").change(function() {
                var conattr = $(this).attr('contenteditable');
                if (typeof conattr !== typeof undefined && conattr !== false) {
                    //if p tag as attribute contenteditable 
                    $(this).css('border', 'solid 2px red');
                } else {
                    //if doesn't have p tag as attribute contenteditable 
                    $(this).css({
                        "border": "solid 2px green",
                        "border-radius": "34px"
                    }).attr('contenteditable', 'true')
  
                }
            }).trigger("change");
        });
    </script>
</body>
  
</html>

Output:

Example 2:
Let’s take an example program to make the element editable or non-editable by selecting the dropdown option using jQuery change event.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <style>
        select {
            border: 2px solid blue;
            border-radius: 15px;
            padding: 5px;
            outline: none;
        }
          
        p {
            border: 2px solid #c9c9c9;
            border-radius: 20px;
            padding: 15px;
            outline: none;
            background: #ffb;
        }
    </style>
    <script src=
  </script>
</head>
  
<body>
    <select name="element">
  
        <option selected="selected" disabled>
          Select to Edit
      </option>
        <option value="true">Make Editable</option>
  
        <option value="false">Deny Editable</option>
  
    </select>
    <div></div>
    <script>
        $("select")
            .change(function() {
                var ele01 = "<p contenteditable='";
                $("select option:selected").each(function() {
  
                    ele01 += $(this).val() + "" + "'>select above to edit me</p>";
                });
                $("div").html(ele01);
                if ($("select").val() == "false" || $("select").val() == "") {
                    $("p").css({
                        "font-weight": "bold",
                        "color": "blue",
                        "font-style": "italic",
                        "cursor": "none"
                    });
                } else {
                    $("p").css({
                        "color": "grey",
                        "font-style": "italic"
                    });
                }
            })
            .change();
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!