如何禁用页面所有点击操作，仅保留文本输入框自动聚焦功能？

核心分四个模块处理即可：

• 焦点永久锁定：监听输入框的blur失焦事件，触发时立刻重新执行聚焦；页面初始化完成后主动触发一次聚焦，避免原生autofocus在部分场景下失效。
• 全局拦截点击：在document的事件捕获阶段绑定点击回调，直接阻止事件默认行为与传播，全页面所有元素的点击操作都不会触发对应逻辑。
• 禁用光标移动/选中文本：拦截方向键、Home、End等会移动光标的按键；监听选中文本、点击输入框的事件，触发时强制把光标定位到输入内容的最末尾，取消所有选中状态，禁止光标跳到任意点击位置。
• 放行合法操作：仅保留普通文本输入、退格/删除编辑、回车键的响应，其余快捷键、功能键全部拦截。

<input autofocus placeholder="RR" name="RR" id="RR" type="text">

<script>
const input = document.getElementById('RR')

// 页面加载完成后主动聚焦
window.addEventListener('load', () => {
  input.focus()
})

// 失焦立刻重新聚焦
input.addEventListener('blur', () => {
  input.focus()
})

// 捕获阶段全局拦截所有点击事件
document.addEventListener('click', (e) => {
  e.preventDefault()
  e.stopPropagation()
  input.focus()
  setCaretToEnd(input)
}, true)

// 键盘事件拦截：只放行输入、退格、删除、回车
input.addEventListener('keydown', (e) => {
  const allowFunctionKeys = ['Enter', 'Backspace', 'Delete']
  // key长度为1时对应普通可输入字符（字母、数字、符号等），直接放行
  if (e.key.length === 1 || allowFunctionKeys.includes(e.key)) {
    // 等输入内容更新后，强制把光标移到末尾
    setTimeout(() => setCaretToEnd(input), 0)
    return
  }
  // 其余按键（方向键、Home、End、组合快捷键等）全部拦截
  e.preventDefault()
})

// 拦截文本选中操作
input.addEventListener('select', () => {
  setCaretToEnd(input)
})

// 工具方法：将光标固定到输入内容末尾
function setCaretToEnd(el) {
  const textLength = el.value.length
  el.setSelectionRange(textLength, textLength)
}
</script>

实现效果说明：页面加载后焦点自动落在输入框，任何操作都无法把焦点移走；所有点击操作无响应；光标永远固定在已输入内容的最后一位，无法通过鼠标、键盘移动光标，也无法选中部分文本；仅支持输入字符、退格/删除修改内容、按回车键触发后续逻辑，你可以在Enter键的判断分支里添加自己的回车业务处理代码。

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