如何用JavaScript为类Trello应用的Li元素添加可编辑文本功能

Hey there! Glad to hear you're building a Trello-style practice app—nailing drag-and-drop first is a great move. Let's get those <li> elements editable with a clean, user-friendly implementation that won't clash with your existing drag functionality.

HTML Structure #

We'll use a dual-element setup for each list item: a <span> for displaying text, and a hidden <input> for editing. This keeps the UX smooth when switching between view and edit modes:

<ul class="card-list">
  <!-- Example list item -->
  <li class="draggable-card" draggable="true">
    <span class="card-text">First editable card</span>
    <input type="text" class="card-input" value="First editable card" style="display: none;">
  </li>
  <li class="draggable-card" draggable="true">
    <span class="card-text">Second editable card</span>
    <input type="text" class="card-input" value="Second editable card" style="display: none;">
  </li>
</ul>

Basic CSS (for polish) #

Add this to make the edit mode look consistent with your card styling:

.card-list {
  list-style: none;
  padding: 0;
}

.draggable-card {
  padding: 8px 12px;
  margin: 8px 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: grab;
}

.card-text {
  display: block;
  width: 100%;
}

.card-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
}

JavaScript Implementation #

This code handles switching between view/edit modes, saving changes, and ensuring compatibility with drag-and-drop:

// Get all card elements
const cards = document.querySelectorAll('.draggable-card');

cards.forEach(card => {
  const textElement = card.querySelector('.card-text');
  const inputElement = card.querySelector('.card-input');

  // Switch to edit mode when clicking the text
  textElement.addEventListener('click', () => {
    textElement.style.display = 'none';
    inputElement.style.display = 'block';
    inputElement.focus();
    // Optional: Disable drag while editing to prevent conflicts
    card.draggable = false;
  });

  // Save changes when input loses focus
  inputElement.addEventListener('blur', () => {
    saveChanges();
  });

  // Save changes when pressing Enter key
  inputElement.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      saveChanges();
    }
  });

  // Helper function to save edits
  function saveChanges() {
    const newText = inputElement.value.trim();
    // Don't save if input is empty (optional: add your own logic here)
    if (newText) {
      textElement.textContent = newText;
      inputElement.value = newText;
    } else {
      // Revert to original text if input is empty
      inputElement.value = textElement.textContent;
    }
    // Switch back to view mode
    inputElement.style.display = 'none';
    textElement.style.display = 'block';
    // Re-enable drag functionality
    card.draggable = true;
  }
});

Key Notes #

• Drag Compatibility: We temporarily disable draggable when editing to prevent users from accidentally dragging the card while typing—you can remove this line if you want drag to work during editing, but it might cause UX issues.
• Empty Input Handling: The code reverts to the original text if the user clears the input. You can modify this to allow empty cards or show a placeholder instead.
• Styling: Adjust the CSS to match your app's design—this is just a minimal starting point.

内容的提问来源于stack exchange，提问作者user11825367