如何动态变更contenteditable div颜色并限制输入指定内容

我来帮你搞定这个需求！要实现contenteditable div内容变更时自动切换颜色，同时限制用户只能输入hello、goodmorning和goodbye，可以按照以下步骤来实现：

1. 核心思路 #

• 监听内容变化：用input事件实时捕捉用户输入，配合blur事件处理失焦后的最终验证（确保用户点击外部后内容合法）。
• 样式映射：把每个允许的文本对应到特定的背景色和文字颜色，方便统一维护。
• 输入验证：检查输入内容是否在允许列表中，合法则应用样式，不合法则提示或重置。

2. 完整代码示例 #

HTML 结构 #

<table>
  <tr>
    <td><div contenteditable="true" class="change">hello</div></td>
    <td><div contenteditable="true" class="change">goodmorning</div></td>
    <td><div contenteditable="true" class="change">goodbye</div></td>
  </tr>
</table>

JavaScript 实现 #

// 定义允许输入的文本集合
const allowedTexts = ['hello', 'goodmorning', 'goodbye'];
// 建立文本与样式的映射关系，可根据需求自定义颜色
const styleMap = {
  hello: { backgroundColor: '#4CAF50', color: 'white' },
  goodmorning: { backgroundColor: '#FFC107', color: 'black' },
  goodbye: { backgroundColor: '#F44336', color: 'white' }
};

// 获取所有可编辑的div元素
const editableDivs = document.querySelectorAll('.change');

// 通用处理函数：验证内容并更新样式
function updateStyleAndValidate(el) {
  // 去除首尾空格并转小写（不区分大小写的话保留这一步，严格区分则去掉toLowerCase()）
  const currentText = el.textContent.trim().toLowerCase();
  
  if (allowedTexts.includes(currentText)) {
    // 内容合法，应用对应样式
    Object.assign(el.style, styleMap[currentText]);
  } else {
    // 内容不合法，重置样式并提示用户
    el.style.backgroundColor = '';
    el.style.color = '';
    alert('只能输入 hello、goodmorning 或 goodbye 哦！');
  }
}

// 给每个可编辑div绑定事件
editableDivs.forEach(div => {
  // 实时监听输入变化，动态更新样式
  div.addEventListener('input', () => {
    updateStyleAndValidate(div);
  });

  // 失焦时再次验证，确保最终内容合法（可选：如果内容不合法，强制重置为默认值）
  div.addEventListener('blur', () => {
    const currentText = div.textContent.trim().toLowerCase();
    if (!allowedTexts.includes(currentText)) {
      // 这里默认重置为hello，可根据需求修改
      div.textContent = 'hello';
      Object.assign(div.style, styleMap['hello']);
    }
  });

  // 页面加载时初始化样式
  updateStyleAndValidate(div);
});

3. 可选：严格拦截非法输入（实时阻止） #

如果希望用户无法输入任何非法字符（比如输入其他字母直接被阻止），可以添加keydown事件监听，只允许输入符合允许文本前缀的字符：

editableDivs.forEach(div => {
  div.addEventListener('keydown', (e) => {
    const currentText = div.textContent.trim().toLowerCase();
    const inputChar = e.key.toLowerCase();
    
    // 允许退格和删除键
    if (e.key === 'Backspace' || e.key === 'Delete') return;
    
    // 检查输入字符后是否能匹配允许文本的前缀
    const possibleMatches = allowedTexts.filter(text => 
      text.startsWith(currentText + inputChar)
    );
    
    // 没有匹配项则阻止输入
    if (possibleMatches.length === 0) {
      e.preventDefault();
    }
  });
});

4. 说明 #

• 样式自定义：直接修改styleMap中的颜色值即可调整不同文本对应的样式。
• 大小写处理：代码中用了toLowerCase()，如果需要严格区分大小写（比如只允许小写的hello），去掉这个方法即可。
• 用户体验：失焦时的重置逻辑可以根据需求调整，比如改为清空内容而非设置默认值，或者显示更友好的提示。

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