Content editable change event in jQuery

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= 
"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> 

Content editable change event in jQuery

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?