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