如何将div及其所有子元素设置为只读？适配动态元素与移动端场景

首先明确：直接给父div设置readonly属性完全无效。原因有二：

1. readonly是表单元素（input、textarea、select等）专属属性，div这类普通元素不支持该属性；
2. readonly属性不具备继承性，即便父元素是表单元素，子元素也不会自动继承readonly状态。

针对你的场景（大量动态子元素、移动端文本框弹键盘），推荐以下两种简便方案：

方案一：CSS pointer-events 完全阻止交互 #

这是最简洁的方案，直接通过CSS禁用整个div区域的所有鼠标/触摸交互，包括元素聚焦，从根源上避免移动端弹出键盘。

.readonly-block {
  pointer-events: none;
  /* 可选：添加样式提示用户该区域不可编辑 */
  opacity: 0.8;
}

给目标div添加readonly-block类即可。

注意：该方案会禁用所有交互（点击、hover、聚焦等），适合你这种整体不可编辑的应用场景。如果需要保留部分交互（比如点击事件），请用方案二。

方案二：事件委托动态设置只读 #

通过事件监听父div的focusin事件，动态给所有聚焦的可编辑元素设置readonly属性，适配动态新增的子元素。

// 获取目标div
const readonlyContainer = document.getElementById('your-div-id');

// 监听聚焦事件
readonlyContainer.addEventListener('focusin', function(e) {
  const target = e.target;
  // 匹配所有可编辑元素：input、textarea、contenteditable元素
  if (
    (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') ||
    target.isContentEditable
  ) {
    target.setAttribute('readonly', 'readonly');
    // 如果是select元素，readonly无法阻止下拉，可改用disabled或结合pointer-events
    if (target.tagName === 'SELECT') {
      target.disabled = true;
      // 可选：保持原样式，避免disabled的灰化效果
      target.style.opacity = '1';
    }
  }
});

这种方式只会禁用编辑能力，不会影响其他交互（比如点击事件），适合需要保留部分交互的场景。

补充说明 #

• 若使用contenteditable的元素，给父div设置contenteditable="false"可以让子元素默认不可编辑，但如果子元素单独设置了contenteditable="true"，会覆盖父级设置。
• 移动端弹出键盘的核心原因是元素获得焦点，只要阻止元素聚焦或设置只读，就能解决该问题。

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