移动端contenteditable plaintext-only属性不生效兼容问题咨询

contenteditable="plaintext-only"移动端兼容问题原因 #

• 非标准属性的实现差异
  contenteditable="plaintext-only"不属于W3C正式发布的标准属性值，最初是Chromium团队推出的非标准扩展功能，各浏览器内核的实现逻辑没有统一标准约束，移动端内核的适配进度与桌面端存在明显差异。
• 移动端输入事件处理逻辑优先级问题
  移动端Chrome、Safari使用的WebKit内核分支，对移动端软键盘触发的输入事件处理逻辑与桌面端完全不同：桌面端内核会在输入内容插入DOM前，先走plaintext-only的纯文本过滤逻辑，所有富文本标签都会被直接过滤为纯文本；而移动端内核会先将软键盘输入的换行转换为<br>DOM节点插入后再触发plaintext-only的处理逻辑，此时<br>标签不会被转换为纯文本换行符，导致纯文本限制失效。
• iOS端内核统一限制
  iOS系统要求所有第三方浏览器必须使用WebKit内核，包括iOS端的Chrome也沿用Safari的内核逻辑，而Safari对plaintext-only的完整支持是在Safari 16.4版本才正式上线，低于该版本的移动端Safari、以及iOS端全版本第三方浏览器都没有完整实现该属性的纯文本限制逻辑，仅能识别元素可编辑属性，纯文本过滤规则完全不生效。

临时修复方案 #

可以监听元素的input事件，每次输入后手动清空元素内的所有HTML标签，仅保留纯文本内容，自动将<br>替换为换行符即可，示例代码如下：

const editableTd = document.querySelector('td[contenteditable="plaintext-only"]');
editableTd.addEventListener('input', () => {
  // 用innerText获取包含换行符的纯文本内容
  const pureText = editableTd.innerText;
  // 直接赋值textContent清空所有HTML标签，仅保留纯文本
  editableTd.textContent = pureText;
  // 光标移动到内容末尾
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(editableTd);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
})

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