PC端可交互Div移动端无法操作，contenteditable方案存Bug求助

嘿，我来帮你搞定这个移动端可编辑Div的问题！

首先，你遇到的情况很典型：PC端自定义交互的Div能正常工作，但移动端因为没有原生输入控件的唤起机制，导致软键盘弹不出来，用户没法输入。用contenteditable是正确的思路，但它确实自带一些坑，咱们一步步来解决：

一、先搞定移动端输入唤起的核心问题 #

移动端浏览器不会主动给普通Div弹软键盘，所以咱们要主动触发焦点，同时配合contenteditable让浏览器识别这是可输入区域：

1. 给Div加上contenteditable="true"属性，同时通过CSS移除默认的编辑样式（比如高亮边框）：

.editable-div {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 100px;
  /* 移除默认编辑高亮 */
  outline: none;
  /* 去掉移动端点击时的高亮背景 */
  -webkit-tap-highlight-color: transparent;
  /* 保持输入的换行格式 */
  white-space: pre-wrap;
}

2. 用JavaScript监听触摸事件，主动唤起焦点和软键盘——这是移动端的关键：

const interactiveDiv = document.getElementById('your-div-id');

interactiveDiv.addEventListener('touchstart', function(e) {
  // 阻止默认触摸行为，避免浏览器的默认干扰
  e.preventDefault();
  // 主动触发焦点
  this.focus();
  // 强制把光标移到内容末尾，避免光标乱跑
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});

二、修复contenteditable带来的常见Bug #

用了contenteditable后，容易出现格式混乱、光标错位、自动添加HTML标签的问题，咱们针对性解决：

1. 只允许纯文本输入，避免自动生成HTML

移动端输入时，浏览器可能会自动把换行转成<br>或者<div>，咱们可以在input事件里把内容转成纯文本：

interactiveDiv.addEventListener('input', function() {
  // 只保留纯文本，移除所有HTML标签
  const plainText = this.innerText;
  this.innerText = plainText;
  // 每次输入后都把光标移到末尾
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});

2. 禁止长按弹出编辑菜单

如果不想让用户长按出现“复制/粘贴”之类的默认菜单，可以加个CSS属性：

.editable-div {
  user-select: text; /* 允许选中文本，但阻止默认菜单 */
  -webkit-user-select: text;
}

或者用JavaScript阻止上下文菜单：

interactiveDiv.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

三、兼容性测试小技巧 #

• iOS Safari对contenteditable的光标处理有点怪，你可以试试给Div加个line-height属性，避免光标错位；
• Android Chrome有时候会出现软键盘遮挡Div的情况，可以监听resize事件，调整Div的位置；
• 尽量保持Div内部只有纯文本，不要嵌套复杂的HTML结构，否则contenteditable的行为会更不可控。

按照这些步骤调整后，你的Div应该能在移动端正常输入，同时避免contenteditable带来的Bug啦！

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