如何使用 JavaScript 创建可编辑的 div？

在本文中，我们将向您解释如何使用 HTML、CSS 和 JavaScript 创建可编辑的 div。可编辑的 div 是您单击它的一个，然后它将生成一个可编辑的文本区域以在您的浏览器本身上编辑或写入任何文本。编辑后，当您单击浏览器上的其他位置时，该文本将显示为恒定文本（不可编辑）。

先决条件：您应该熟悉 HTML、CSS 和 JavaScript 的基础知识。

创建结构：为 HTML 和 JavaScript 创建两个文件。要创建这些文件，请运行以下命令

• 句法：

  $ touch index.html app.js

• 第 1 步：编辑index.html 。 该文件包含以下代码。

  HTML

      
      
    
          
              Creating Editable Div GeeksforGeeks
          
    
          
              
          
    
      
      
      

  
  
  
  
• 第 2 步：编辑app.js文件。 该文件包含以下代码。

  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 =
    
      ` 
      ${html}`;
  }
    
  // Listening the blur event on textarea
    
  let textarea = document.getElementById('textarea');
    
  textarea.addEventListener('blur',function() {
      elem.innerHTML = textarea.value;
      localStorage.setItem(
      'text', textarea.value); 
    
      })
  });
  

  最终解决方案：这是上述两个步骤的组合。
  

  HTML

      
      
    
          
              Creating Editable Div GeeksforGeeks
          
    
          
              
          
    
      
        
      
    
          // 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); 
                
                  })
              }); 
                  
      
    

  输出：当您在任何浏览器上打开它时，将生成以下输出。