Content editable change event in jQuery - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </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="https://code.jquery.com/jquery-1.10.2.js">  </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:
jQuery-Misc
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
How to get the value in an input text box using jQuery ?
Difference Between JavaScript and jQuery
QR Code Generator using HTML, CSS and jQuery
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?