Question

我想在之前的div内容充满单词时显示div，并继续用剩下的单词填充这个新div。

我不知道怎么做。事实上，在下面的代码中，我写道，单击一个按钮就会显示div。我也无法设置上面解释的“填充动作”。

必须从代码中设置一个div中单词的限制。

例如，如果我将限制设置为两个单词并且只显示两个单词，则不应创建第二个div。

但是如果要显示四个单词并且限制仍然是两个单词，必须创建第二个div，并且必须填充第三个和第四个单词。

另一个问题是，如果我写HTML文本（例如<font color="#ff0000">），标签（例如<font）不应被视为单词。

HTML：

<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella' class='fakes'></div>

CSS：

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

#casella{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}

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

JQUERY：

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var secondo = document.getElementById('casella');
  secondo.innerHTML = primo.innerHTML;
  var myDiv = $('#casella');
  myDiv.text(myDiv.text().substring(0,5)) //This is when the div is "full"
});

document.getElementById("btn").onclick = function () {
var ok = true;

 if (ok === true) {
      var div = document.createElement('div');

      div.className = 'fakes';       

   document.getElementsByTagName('body')[0].appendChild(div);
  }
};

在这种情况下，我设置当有5个字母时div已满，因此必须在第二个div中显示“ Here ”这个词... 这可能吗？我无法理解。

Answer 1

用于在正确的位置显示div

的CSS：

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

 #boxes{
   display : flex;
 }

HTML

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

Answer 2

使用String.split()分隔单词（按空格），并使用Array.foreach()为每个单词添加 div 容器。同样使用此方法，使用Array.shift()将 myDiv 元素的文本（即id="casella"）设置为第一个单词。

更新

根据不断变化的要求，下面的代码现在有一个字数限制的数字输入。然后，它使用正则表达式剥离HTML代码（使用HTML实体），然后使用计数器向新创建的 div 元素添加单词。创建新 div 元素的功能已被抽象为函数 createdDiv（）。

＆＃13;

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = $('#wordLimit').val();
  //strip html characters from string and use a regular expression 
  //to split based on white-space characters
  var words = primo.innerHTML.replace(/(&lt;([^&gt;]+)&gt;)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 0; //reset counter
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div'); //could use jQuery $('div') instead
  div.className = 'fakes';
  document.body.append(div);
  return div;
}

＆＃13;

#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}
#casella {
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}
.fakes {
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Word Limit:
  <input type="number" id="wordLimit" value="1" />
</div>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>

＆＃13;

Answer 3

 var myDiv = $('#casella');
 var primo = document.getElementById('faketxt');
 var secondo = document.getElementById('casella');

 $('#btn').click(function() { 

   var inputArray = primo.innerHTML.split(" ");

   var secDivContent = '';

   if(inputArray[0].length > 5 || primo.innerHTML.length > 5 ) {
     secDivContent = primo.innerHTML.substr(5);         
   }    

  var div = document.createElement('div');

  div.className = 'fakes'; 
  div.innerHTML = secDivContent;
  document.getElementsByTagName('body')[0].appendChild(div);

});

使用JQuery填充之前的div

3 个答案:

更新