JS新手求助：如何在待办列表输入框的placeholder中显示错误提示

要把错误提示放到输入框的placeholder里，核心是缓存默认的placeholder文本，避免覆盖后无法恢复，同时在用户交互时及时重置状态。以下是具体修改方案：

步骤1：缓存默认placeholder并修改逻辑 #

调整JS代码，提前保存输入框的默认提示文本，在错误状态时替换，用户输入时恢复：

// 提前获取输入框元素，缓存默认的placeholder
const inputBox = document.getElementById('input-box');
const defaultPlaceholder = inputBox.placeholder;

function addTask() {
  // 用trim()过滤纯空格的情况
  if (inputBox.value.trim() === '') {
    // 设置错误提示为placeholder
    inputBox.placeholder = 'You Must Write Something!';
    // 给输入框加错误样式（可选，增强视觉提示）
    inputBox.classList.add('error');
    // 清空原来的错误提示span（如果不需要保留可以删掉）
    document.getElementById("errmsg").innerHTML = '';
    return;
  } else {
    // 先恢复默认的placeholder和样式（防止之前的错误状态残留）
    inputBox.placeholder = defaultPlaceholder;
    inputBox.classList.remove('error');
    
    // 原来的添加任务逻辑保持不变
    let li   = document.createElement("li");
    let span = document.createElement("span");
    li.innerHTML   = inputBox.value;
    span.innerHTML = "×";
    listContainer.appendChild(li);
    li.appendChild(span);
  }
  inputBox.value = '';
  saveData();
}

// 监听输入事件，用户开始输入时立即恢复默认状态
inputBox.addEventListener('input', () => {
  inputBox.placeholder = defaultPlaceholder;
  inputBox.classList.remove('error');
});

步骤2：添加错误样式（可选） #

可以加一点CSS让错误状态更明显：

#input-box.error {
  border-color: #ff4444;
  background-color: #ffebee;
}

关键说明 #

• 缓存默认placeholder：避免直接替换后无法找回原来的"Add your Task"提示。
• 监听input事件：用户只要开始输入，就立即恢复默认状态，不会一直显示错误提示。
• 用trim()判断空值：防止用户输入纯空格时绕过错误校验。

内容的提问来源于stack exchange，提问作者Sayed H.