jQuery 中的内容可编辑更改事件

总的来说，jQuery 提供了各种函数来处理选择器、选择器属性甚至文档等。
而这里使用 jquery 更改事件进行内容可编辑。

jQuery 更改事件：
它发生在元素的值发生更改时，当用户使用鼠标进行选择或字段失去焦点时，会立即触发此事件。

句法：

$(selector).change(function callback);

内容可编辑：
Content Editable 主要是所有 HTML 元素的一个属性。
当此属性为 true 时，该元素将显示可编辑的内容。
当它为 false 时，内容可编辑被禁用。

属性：

contenteditable="true"

示例 1：
让我们以一个示例程序来检查元素是否可编辑或具有使用 jQuery 更改事件设置为 true 或 false 的属性“contenteditable” 。

  

    
  
  
    
        div {
            padding: 20px;
            outline: none;
        }
          
        p {
            color: grey;
            outline: none;
            padding: 20px;
        }
    

  

  
    
        
          Welcome to GeeksforGeeks
      
    
      Welcome to GeeksforGeeks
  
  
    
        //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");
        });
    

  

输出：

示例 2：
让我们举一个示例程序，通过使用 jQuery 更改事件选择下拉选项来使元素可编辑或不可编辑。

  

    
    
        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;
        }
    
    
  

  

    
  
        
          Select to Edit
      
        Make Editable
  
        Deny Editable
  
    
    
    
        $("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();
    

  

输出：