技术求助：如何实现互动诗歌中仅空白区域可编辑？

嘿，这个互动诗歌的创意太有意思了！下面给你两种简单可靠的实现思路，能精准控制只有下划线的空白处可编辑，其余内容完全只读：

方案一：利用contenteditable属性（最简便） #

核心思路是把每个需要填写的空白区域做成独立的<span>元素，给它们加上contenteditable="true"，同时给父容器设置contenteditable="false"锁定整体文本，再用CSS把可编辑区域美化成下划线样式。

完整代码示例 #

<style>
/* 父容器整体设为不可编辑 */
#poem {
  contenteditable: false;
  font-size: 1.2rem;
  line-height: 1.8;
  white-space: pre-wrap; /* 保留诗歌的换行格式 */
}

/* 可编辑区域样式：模拟下划线 */
.editable {
  contenteditable: true;
  border-bottom: 2px solid #000;
  min-width: 80px; /* 保证空白有足够宽度 */
  display: inline-block;
  text-align: center;
  outline: none; /* 去掉默认编辑框的焦点边框 */
}

/* 可选：聚焦时的高亮样式 */
.editable:focus {
  border-bottom-color: #2563eb;
  background-color: #f0f9ff;
}
</style>

<div id="poem">
<b><u>Social Media</u></b>
Relax yourself,
As I <span class="editable"></span> through your mind
Scroll down the pages of your spine
Reading every word and thought on your <span class="editable"></span> like a <span class="editable"></span>
Stumbled Upon you then <span class="editable"></span> onto your looks--IGuess I'm <span class="editable"></span> into you
Yo...
</div>

为什么这么做？ #

• 父容器#poem设置contenteditable: false，确保所有非指定区域不可编辑；
• 每个.editable元素单独开启contenteditable: true，打破父元素的只读限制；
• CSS里的min-width和border-bottom让空白区域和原有的下划线视觉一致，用户体验更自然；
• outline: none去掉了默认的编辑焦点框，让样式更统一。

方案二：JavaScript辅助控制（更灵活） #

如果需要额外的交互逻辑（比如限制输入字数、实时验证内容），可以用JS监听事件，手动管理可编辑区域：

简化示例 #

<style>
.editable {
  border-bottom: 2px solid #000;
  min-width: 80px;
  display: inline-block;
  text-align: center;
  cursor: text; /* 鼠标悬浮显示文本光标 */
}
</style>

<div id="poem">
<b><u>Social Media</u></b>
Relax yourself,
As I <span class="editable" data-editable="true"></span> through your mind
Scroll down the pages of your spine
Reading every word and thought on your <span class="editable" data-editable="true"></span> like a <span class="editable" data-editable="true"></span>
Stumbled Upon you then <span class="editable" data-editable="true"></span> onto your looks--IGuess I'm <span class="editable" data-editable="true"></span> into you
Yo...
</div>

<script>
const editableSpans = document.querySelectorAll('[data-editable="true"]');

// 给每个可编辑区域绑定点击事件，创建临时输入框
editableSpans.forEach(span => {
  span.addEventListener('click', () => {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = span.textContent;
    input.style.width = '100%';
    input.style.border = 'none';
    input.style.textAlign = 'center';
    input.style.background = 'transparent';
    
    span.innerHTML = '';
    span.appendChild(input);
    input.focus();
    
    // 失去焦点时把输入内容放回span
    input.addEventListener('blur', () => {
      span.textContent = input.value || '';
    });
    
    // 按下回车也触发失焦，完成输入
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        input.blur();
      }
    });
  });
});

// 阻止父容器的编辑操作
document.getElementById('poem').addEventListener('keydown', (e) => {
  e.preventDefault();
});
</script>

这个方案适合需要定制交互逻辑的场景，比如限制输入长度、自动补全词汇等。

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