Skip to content
Related Articles

Related Articles

Improve Article

Content editable change event in jQuery

  • Difficulty Level : Hard
  • Last Updated : 24 Jul, 2019

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 :