Evento de cambio de contenido editable en jQuery

En general, jQuery proporciona varias funciones para manejar selectores, propiedades de selector e incluso documentos, etc.
Mientras que aquí se usa el evento de cambio de jquery para contenido editable.

Evento de cambio de jQuery:
ocurre cuando se cambia el valor de un elemento; también este evento se dispara inmediatamente cuando el usuario hace una selección con el mouse o cuando el campo pierde el foco.

Sintaxis:

$(selector).change(function callback);

Contenido editable:
el contenido editable es principalmente un atributo para todos los elementos HTML.
Cuando este atributo es verdadero, ese elemento mostrará contenido editable.
Cuando es falso, el contenido editable está deshabilitado.

Atributo:

contenteditable="true"

Ejemplo 1:
tomemos un programa de ejemplo para verificar que el elemento sea editable o tenga el atributo «contenteditable» que se establece en verdadero o falso mediante el evento de cambio de jQuery.

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

Producción:

Ejemplo 2:
Tomemos un programa de ejemplo para hacer que el elemento sea editable o no editable seleccionando la opción desplegable usando el evento de cambio de jQuery.

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

Producción:

Publicación traducida automáticamente

Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *