[英]How to set a different position of a div if I insert a paragraph in my textarea
我要設置的是,如果在文本區域中按“在此處寫”和“人”之間按回車鍵,則應將兩個分別帶有“寫”和“在這里”字樣的框相互垂直顯示,並且帶有“ Guys”的框應在“ Write”下。
並且如果有四個單詞具有與之前相同的示例,則第四個框應位於“人”旁邊。
在我的代碼中,我寫道,如果有空間可顯示所有框,它們將按正交方向顯示,因為如果文本框是“輸入空間”,我不知道如何在其他框下方放置一個框。
惠特代碼更容易理解:
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 = '';
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.