En este artículo, vamos a ver cómo hacer que el contenido sea editable usando HTML. Para editar el contenido en HTML, usaremos el atributo contenteditable . El contenteditable se usa para especificar si el contenido del elemento es editable por el usuario o no.
Sintaxis:
<element contenteditable="true|false">
Este atributo tiene dos valores.
- true: si el valor del atributo contenteditable se establece en true , el elemento es editable.
- false: si el valor del atributo contenteditable se establece en false , el elemento no se puede editar.
NOTA: si el atributo se proporciona sin un valor, como <h1 contenteditable>GEEKSFORGEEKS</h1>, su valor se trata como una string vacía y la string vacía se tratará como verdadera .
Ejemplo 1: en este ejemplo, crearemos un elemento de encabezado con el valor del atributo contenteditable establecido en true .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1 contenteditable="true">
This is an Editable Heading element.
</h1>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, todo el código será el mismo, solo cambiaremos el valor de la propiedad contenteditable a false .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1 contenteditable="false">
This is element cannot be edited.
</h1>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, no proporcionamos ningún valor al atributo editable . Si falta el atributo editable o su valor no es válido, su valor se hereda de su elemento principal: por lo tanto, el elemento es editable si su elemento principal es editable.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1 contenteditable>GeeksforGeeks.</h1>
</body>
</html>
Producción:
Ejemplo 4:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
border: 2px solid black;
}
</style>
</head>
<body>
<div contenteditable="true">
<h1>GeeksforGeeks.</h1>
<p>Welcome to geeksforgeeks</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA