如果在textarea中插入段落，如何设置div的其他位置

Question

我要设置的是，如果在文本区域中按“在此处写”和“人”之间按回车键，则应将两个分别带有“写”和“在这里”字样的框相互垂直显示，并且带有“ Guys”的框应在“ Write”下。

并且如果有四个单词具有与之前相同的示例，则第四个框应位于“人”旁边。

在我的代码中，我写道，如果有空间可显示所有框，它们将按正交方向显示，因为如果文本框是“输入空间”，我不知道如何在其他框下方放置一个框。

惠特代码更容易理解：

JS小提琴

HTML：

<div id="faketxt" contenteditable>Write Here
Guys</div>
<button id='btn'>OK</button><br>
<div id='boxes'>

CSS：

#faketxt {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

.fakes{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
  display:inline-block;
}

#boxes{
  display : flex;
}

jQuery的：

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 1;
  var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}

Answer 1

尝试这个

var words = primo.innerText.replace(/(<([^>]+)>)/ig,"").split(/\s/);

替换下面的行

  if (div.innerHTML) {
    div.append(' ');
  }

与

  if (word == '') {
    div.className = '';
  }