阻止HTML输入框在内容改变时自动滚动到焦点位置

<textarea name="" id="input1" cols="30" rows="10">这是一个初始文本。</textarea>
<div id="demo" style="height: 3000px; background-color: #f0f0f0;"></div>
<button>聚焦顶部文本框 (阻止滚动)</button>
<textarea name="" id="input2" cols="30" rows="10">底部文本框</textarea>

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 4000px; /* 确保页面足够长以触发滚动 */
}

textarea {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 5px;
}

#demo {
  height: 3000px; /* 用于创建滚动区域 */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
}

button {
  padding: 10px 15px;
  margin-bottom: 20px;
  cursor: pointer;
}

const myTextarea = document.querySelector("#input1");
const focusButton = document.querySelector("button");

// 监听keydown事件，阻止默认的输入行为和潜在的滚动
myTextarea.addEventListener("keydown", (e) => {
  // 阻止默认的键盘事件，包括字符输入和浏览器可能触发的滚动
  e.preventDefault();
  e.stopPropagation(); // 阻止事件冒泡，虽然这里主要关注默认行为

  const { value, selectionStart, selectionEnd } = myTextarea;
  const key = e.key;

  // 处理特殊按键：退格、删除、回车
  if (key === "Backspace") {
    if (selectionStart > 0) {
      myTextarea.value = value.substring(0, selectionStart - 1) + value.substring(selectionEnd);
      myTextarea.selectionStart = myTextarea.selectionEnd = selectionStart - 1;
    }
  } else if (key === "Delete") {
    if (selectionEnd < value.length) {
      myTextarea.value = value.substring(0, selectionStart) + value.substring(selectionEnd + 1);
      myTextarea.selectionStart = myTextarea.selectionEnd = selectionStart;
    }
  } else if (key === "Enter") {
    myTextarea.value = value.substring(0, selectionStart) + "\n" + value.substring(selectionEnd);
    myTextarea.selectionStart = myTextarea.selectionEnd = selectionStart + 1;
  }
  // 处理普通字符输入（排除功能键、组合键等）
  else if (key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
    myTextarea.value = value.substring(0, selectionStart) + key + value.substring(selectionEnd);
    myTextarea.selectionStart = myTextarea.selectionEnd = selectionStart + key.length;
  }
  // 对于方向键 (ArrowLeft, ArrowRight, ArrowUp, ArrowDown), Home, End 等，
  // 如果需要它们的功能，也需要在此处手动实现光标移动逻辑。
  // 例如，处理左方向键：
  else if (key === "ArrowLeft") {
    myTextarea.selectionStart = myTextarea.selectionEnd = Math.max(0, selectionStart - 1);
  }
  // 处理右方向键：
  else if (key === "ArrowRight") {
    myTextarea.selectionStart = myTextarea.selectionEnd = Math.min(value.length, selectionEnd + 1);
  }
  // 其他功能键（如Tab、Escape等）默认行为已被阻止，
  // 如果需要，同样需要在此处编写自定义逻辑。
});

// 示例：一个按钮，用于程序化聚焦文本框并阻止滚动
focusButton.addEventListener("click", () => {
  myTextarea.focus({
    preventScroll: true
  });
});