我想设置如果我在我的文本区域中的“Write Here”和“Guys”之间按enter,那么带有“Write”和“Here”的两个框应该是一个并排地水平显示,带有“Guys”的方框应该在“Write”下方。
如果有四个词与前面的例子相同,第四个框应该在“Guys”旁边。
在我的代码中,我写了所有的框都将水平显示,如果有空间可以显示它们,因为如果文本区域中有“输入空格”,我不知道如何将一个框放在其他框的下面。
代码更容易理解:
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;
}
最佳答案
试试这个
var words = primo.innerText.replace(/(<([^>]+)>)/ig,"").split(/\s/);
替换下行
if (div.innerHTML) {
div.append(' ');
}
与
if (word == '') {
div.className = '';
}
关于javascript - 如果我在 textarea 中插入一个段落,如何设置 div 的不同位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41893895/