使HTML表单元素“仅显示”-非交互式

document.addEventListener("DOMContentLoaded", function () {
 
  const items = document.getElementsByClassName("content-item"); 
  const rightPanel = document.getElementById('right-panel');
  
  for (let i = 0; i< items.length; i++) {
    const item = items[i]; 
    
    item.addEventListener("click", (e) => {
      console.log(e.target);
      const id = e.target.dataset.id; 
      rightPanel.innerHTML = id; 

    });
  
  // ADDED this to capture the Enter and Space presses on our wrapper button
    item.addEventListener("keydown", function(e){
      if(e.keyCode == "32" || e.keyCode == "13"){
      console.log(e.target);
         const id = e.target.dataset.id; 
         rightPanel.innerHTML = id; 
      }
    });
  
  }
});

.main {
  display: flex; 
  flex-flow: row nowrap; 
  
}

.left {
  flex: 1 1 auto; 
}

.right {
  flex: 1 1 auto;
}

.content-item {
  margin-top: 20px;
  width: 600;
  border: solid 2px blue; 
  cursor: pointer;   
}

/* ADDED a focus indicator so keyboard users know where they are */
.content-item:focus{
    outline: 4px solid #333;
}

/* ADDED to stop pointer events reaching the input, button etc. */
input, button{
    pointer-events: none;
}

/* ADDED the visually hidden class so we can provide meaningful text to screen reader users */
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class ="main"> 
  <div class ="left">
<!-- Added `tabindex="0"` so the wrapper is focusable by keyboard -->
<div role="button" tabindex="0">
  <!-- added `aria-hidden="true"` and `tabindex="-1"` to hide the input from screen readers and make sure it cannot be focused by keyboard, I also added `role="presentation"` just for good measure, although it shouldn't be needed. -->
  <input type="text" aria-hidden="true" tabindex="-1" role="presentation">
  <!-- Added this span that explains the action that the "content-item button" would perform if clicked. You need to come up with something meaningful for the contents of this -->
  <span>Edit input [input identifier]</span>
</div>

<div role="button" tabindex="0">
  <button aria-hidden="true" tabindex="-1" `role="presentation"`> I am a button</button>
  <span>Edit button [button identifier]</span>
</div>
  </div>
  
  <div class ="right" > 
    
    <h2> Right panel</h2>
    <div id ="right-panel"> 
      
    </div>
    
  </div>   
</div>