Content editable change event in jQuery

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.