contenteditable span Alternative

Question

我能够在某些文本中创建一个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使其表现出这样的效果，而无需使用多个输入字段以编程方式模拟它？

澄清

[A textarea是display: inline-block，并且使其内联并没有真正使它像span元素那样内联，因此这不是我要寻找的替代项

Answer 1

我以前必须这样做，并且实际上是通过每行的div和光标的跨度以及其他样式重新创建textarea。

这是基本概念：

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>