如何在不修改页面样式的前提下向HTML输入框插入可点击元素？

可以通过绝对定位+实时位置更新的方案实现，完全不需要修改原页面输入框或其父元素的样式，具体步骤如下：

1. 给按钮设置绝对定位样式，脱离文档流，避免影响原页面布局
2. 将按钮插入到输入框的父元素中
3. 通过输入框的位置信息计算按钮的定位，同时监听页面滚动和窗口 resize 事件，实时更新按钮位置，确保始终贴合输入框右侧

完整代码示例：

var button = document.createElement("button");
button.textContent = "?";

// 设置按钮样式，避免干扰原页面
button.style.position = "absolute";
button.style.border = "none";
button.style.background = "transparent";
button.style.cursor = "pointer";
button.style.zIndex = "9999"; // 确保按钮在输入框上方，可正常点击
button.style.padding = "0 6px";
button.style.fontSize = "inherit";
button.style.display = "flex";
button.style.alignItems = "center";
button.style.justifyContent = "center";

var inputField = document.querySelector("#input-field");
var parent = inputField.parentNode;
parent.appendChild(button);

// 定义更新按钮位置的函数
function updateBtnPos() {
  const inputRect = inputField.getBoundingClientRect();
  // 基于输入框的视窗位置，计算按钮的绝对定位坐标
  button.style.top = `${inputRect.top + window.scrollY}px`;
  button.style.left = `${inputRect.left + inputRect.width - button.offsetWidth + window.scrollX}px`;
  // 匹配输入框高度，视觉更统一
  button.style.height = `${inputRect.height}px`;
}

// 初始化位置
updateBtnPos();

// 监听页面滚动和窗口 resize，实时更新位置
window.addEventListener("scroll", updateBtnPos);
window.addEventListener("resize", updateBtnPos);

方案优势： #

• 完全不修改原页面任何元素的样式，不会破坏原有布局
• 按钮始终贴合输入框右侧，即使页面滚动或窗口大小变化也能保持位置正确
• 按钮样式可自定义，不会与原页面样式冲突

如果需要兼容输入框动态变化（比如输入框尺寸、位置被页面脚本修改），可以额外添加 MutationObserver 监听输入框的样式和位置变化，触发位置更新：

// 监听输入框的样式和位置变化
const observer = new MutationObserver(updateBtnPos);
observer.observe(inputField, {
  attributes: true,
  attributeFilter: ["style", "class"]
});

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