contenteditable span Альтернатива - PullRequest
Новая
       7

contenteditable span Альтернатива

0 голосов
/ 30 марта 2020

Я могу создать диапазон 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"> для выполнения sh. Есть ли CSS / JS, который я могу применить, чтобы заставить его вести себя так, без программного моделирования с несколькими полями ввода?

Уточнение

A textarea равно display: inline-block и делает его встроенным на самом деле не делает его встроенным, как элемент span, поэтому я не ищу альтернативу

1 Ответ

0 голосов
/ 30 марта 2020

Я должен был сделать это раньше и прибег к существенному переизобретению текстовой области с элементами div для каждой строки, диапазоном для курсора и некоторыми другими стилями.

Вот основная идея c: 

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>
...