¿Cómo crear div editable usando JavaScript?

En este artículo, le explicaremos cómo crear un div editable usando HTML, CSS y JavaScript. Un div editable es uno en el que hará clic y luego generará un área de texto editable para editar o escribir cualquier texto en su navegador. Después de editar, cuando haga clic en otro lugar de su navegador, ese texto se mostrará como un texto constante (sin editar).

Requisitos previos: debe estar familiarizado con los conceptos básicos de HTML, CSS y JavaScript.

Creación de estructura: Cree dos archivos para HTML y JavaScript. Para crear estos archivos, ejecute el siguiente comando

Sintaxis:
```
$touch index.html app.js
```

Paso 1: Edite i ndex.html . Este archivo contiene el siguiente código.

HTML

<!DOCTYPE html>
<html lang="en">
    
    <body>
  
        <h1 style="color: green;  
                   text-align: center;">
            Creating Editable Div GeeksforGeeks
        </h1>
  
        <div style="text-align: center; 
                    margin-left: 35%;" 
             class="container">
            <div id="first"></div>
        </div>
  
    </body>
    
    <script src="app.js"></script>
</html>

Paso 2: edite el archivo app.js. Este archivo contiene el siguiente código.

JavaScript

// Creating a new element
  
let editableDiv = document.createElement('div');
          
// Adding text to that created element
  
let value = localStorage.getItem('text');   
let text;
  
if (value == null){
    text = document.createTextNode
    ('Click on it to edit this Editable Div');
}
else{
    text = document.createTextNode(value);
}
  
editableDiv.appendChild(text);
editableDiv.setAttribute('id', 'elem');
editableDiv.setAttribute('class', 'elem');
editableDiv.setAttribute('style',
'font-size:3rem;border:3px solid;
 width:350px;height:200px;');
  
// Access the main container
  
let container = document.querySelector('.container');
  
// Inserting the element with id = first
  
container.insertBefore(editableDiv, first);
  
// Adding event listener to the divElem
  
editableDiv.addEventListener('click',function (){
  
let lengthOfTextAreas = 
    document.getElementsByClassName('textarea').length;
                      
if(lengthOfTextAreas == 0){
    let html = elem.innerHTML;
    editableDiv.innerHTML =
  
    `<textarea class="textarea form-control" 
    id="textarea" rows="3"> 
    ${html}</textarea>`;
}
  
// Listening the blur event on textarea
  
let textarea = document.getElementById('textarea');
  
textarea.addEventListener('blur',function() {
    elem.innerHTML = textarea.value;
    localStorage.setItem(
    'text', textarea.value); 
  
    })
});

Solución final: Esta es la combinación de los dos pasos anteriores.

HTML

<!DOCTYPE html>
<html lang="en">
    
    <body>
  
        <h1 style="color: green;  
                   text-align: center;">
            Creating Editable Div GeeksforGeeks
        </h1>
  
        <div style="text-align: center; 
                    margin-left: 35%;" 
             class="container">
            <div id="first"></div>
        </div>
  
    </body>
      
    <script>
  
        // Creating a new element
  
            let editableDiv = document.createElement('div');
              
            // Adding text to that created element
              
            let value = localStorage.getItem('text');   
            let text;
              
            if (value == null){
                text = document.createTextNode
                ('Click on it to edit this Editable Div');
            }
            else{
                text = document.createTextNode(value);
            }
              
            editableDiv.appendChild(text);
            editableDiv.setAttribute('id', 'elem');
            editableDiv.setAttribute('class', 'elem');
            editableDiv.setAttribute('style',
            'font-size:3rem;border:3px solid;
             width:350px;height:200px;');
              
            // Access the main container
              
            let container = document.querySelector('.container');
              
            // Inserting the element with id = first
              
            container.insertBefore(editableDiv, first);
              
            // Adding event listener to the divElem
              
            editableDiv.addEventListener('click',function(){
              
            let lengthOfTextAreas = 
                document.getElementsByClassName('textarea').length;
                                  
            if(lengthOfTextAreas == 0){
                let html = elem.innerHTML;
                editableDiv.innerHTML =
              
               `<textarea class="textarea form-control" 
                id="textarea" rows="3"> 
                ${html}</textarea>`;
            }
              
            // Listening the blur event on textarea
              
            let textarea = document.getElementById('textarea');
              
            textarea.addEventListener('blur',function() {
                elem.innerHTML = textarea.value;
                localStorage.setItem(
               'text', textarea.value); 
              
                })
            }); 
                
    </script>
  
</html>

Salida: cuando lo abra en cualquier navegador, se generará la siguiente salida.

Publicación traducida automáticamente

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

HTML

JavaScript

HTML

Deja una respuesta Cancelar la respuesta