【问题标题】：contenteditable span Alternativecontenteditable span 替代方案
【发布时间】：2020-03-30 17:36:46
【问题描述】：

我能够在一些文本中创建一个contenteditable 跨度，该跨度可以增长和缩小，并且可以在不占用整个宽度的情况下换行多行：

div {
  width: 100px;
  background: #f00;
  padding: 5px;
}

span {
  border: 1px solid #000;
}

<div>
  <span contenteditable="true">Type Something</span>
</div>

我知道contenteditable 的问题和挑战，我只想要纯文本。因此，我想使用<input type="text"> 来完成此操作。有没有我可以应用的 CSS/JS 让它表现得像这样，而无需通过多个输入字段以编程方式模拟它？

澄清

textarea 是 display: inline-block 并使其内联并不能真正使其像 span 元素那样内联，因此它不是我正在寻找的替代方案

【问题讨论】：

标签： javascript html css contenteditable

【解决方案1】：

我以前不得不这样做，并且基本上重新发明了 textarea，其中每行的 div 和光标的跨度和其他一些样式。

这是基本的想法：

let $ = document.querySelector.bind(document);
let text = 'Type Soemthing';
let cursor = text.length;

let updateDisplay = () => {
  $('#pre-text').textContent = text.substr(0, cursor);
  $('#post-text').textContent = text.substr(cursor);
};

document.addEventListener('keyup', e => {
  switch (e.key) {
    case 'ArrowLeft':
      cursor--;
      break;  
    case 'ArrowRight':
      cursor++;
      break;  
    case 'Backspace':
      text = text.substr(0, cursor - 1) + text.substr(cursor);
      cursor--;
      break;
    case 'Delete':
      text = text.substr(0, cursor) + text.substr(cursor + 1);
      break;
    default:
      if (e.key.length === 1) {
        text = text.substr(0, cursor) + e.key + text.substr(cursor);
        cursor++;
      }
  }
  updateDisplay();
});

updateDisplay();

div {
  width: 100px;
  border: 1px solid #f00;
  padding: 5px;
}

span#cursor {
  background: #000;
  width: 1px;
  height: 1em;
  display: inline-block;
}

<div>
  <span id="pre-text"></span>
  <span id="cursor"></span>
  <span id="post-text"></span>
</div>

【讨论】：