HTML5

Cómo hacer una etiqueta o tag div HTML editable

En el presente tutorial vamos a explicar, proporcionando un código fuente de ejemplo para que uses en tus proyectos, cómo hacer una etiqueta o tag div HTML editable, de forma tal que cumpla el mismo funcionamiento que un campo de texto.

Esta funcionalidad puede ser muy útil cuando se requiera crear un campo de texto que no sea un input de type text. Para esto simplemente vamos a aplicar estilos CSS sin la necesidad de tener que programar lógica con Java Script o jQuery.

Código para hacer una etiqueta o tag div HTML editable (campo de texto)

Para realizar esta función simplemente vamos a definir una etiqueta div y le incluiremos el atributo contenteditable en true, permitiendo así que en la etiqueta se pueda escribir cualquier tipo de texto. Además le agregaremos estilos CSS para ajustar correctamente el tamaño y para que el texto no sobresalga del div.

<html>
  <head>
    <title>Cómo hacer una etiqueta o tag div HTML editable</title>
    <style>
      .editable {
        width: 300px;
        min-height: 20px;
        border: 1px solid black;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div class="editable" contenteditable="true">
    </div>
  </body>
</html>

Al ejecutar el código anterior en un navegador van a poder visualizar el campo de texto editable, simplemente para probarlo pueden tipear cualquier caracter y ver como se adapta al tamaño.

En el caso de que sea necesario recuperar el valor ingresado en el campo de texto se puede utilizar la función text que nos proporciona jQuery, como lo mostraremos a continuación.

$('.editable').text();

Eso es todo lo necesario para poder hacer una etiqueta o tag div editable en HTML, en muy pocos pasos y sobre todo de forma eficiente. En el caso de que tengan algún inconveniente no duden en dejar un comentario.

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

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