javascript - 如果我在 textarea 中插入一个段落，如何设置 div 的不同位置

Question

我想设置如果我在我的文本区域中的“Write Here”和“Guys”之间按enter，那么带有“Write”和“Here”的两个框应该是一个并排地水平显示，带有“Guys”的方框应该在“Write”下方。

如果有四个词与前面的例子相同，第四个框应该在“Guys”旁边。

在我的代码中，我写了所有的框都将水平显示，如果有空间可以显示它们，因为如果文本区域中有“输入空格”，我不知道如何将一个框放在其他框的下面。

代码更容易理解:

JSfiddle

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 = '';
  }