如果我做对了,您需要做的是在父ul上设置填充,这很有趣,他们已经设置好了,如果您想进一步缩进,则可以在其中添加更多的填充,但是例如,它还不够清楚,您没有为li设置innerHtml或innerText,另一方面,如果要使div集中,则可能应为其设置tabindex。
编辑:在您使用id为ul的div之前,我没有发现,您仍然可以添加一个内部子li,但这没有多大意义,如果您仍然决定采用这种方式,则可以设置每个li子的样式,使其具有相同的左边距,并设置before属性为'*'
编辑2:
初始标记:
<div class="outline-editor">
<button>+ Add child</button>
<input type="text" name="content" id="add-text" />
<ul>
Items go here:
</ul>
</div>
<script>
const button = document.querySelector('button')
const input = document.querySelector('input')
const ul = document.querySelector('ul')
function addChild(li) {
let ul = li.querySelector('ul');
if (!ul) {
ul = document.createElement('ul')
li.appendChild(ul)
}
let childLi = document.createElement('li')
let childButton = document.createElement('button')
childButton.innerText = '+ Add child'
let childSpan = document.createElement('span')
childSpan.innerText = input.value;
childButton.addEventListener('click',() => {
addChild(childLi)
})
childLi.style.marginLeft = '15px'
childLi.appendChild(childSpan)
childLi.appendChild(childButton)
ul.appendChild(childLi)
}
function handleClick(e) {
let li = document.createElement('li')
let childButton = document.createElement('button')
childButton.innerText = '+ Add child'
let childSpan = document.createElement('span')
childSpan.innerText = input.value;
childButton.addEventListener('click',() => {
addChild(li)
})
li.style.marginLeft = '15px'
li.appendChild(childSpan)
li.appendChild(childButton)
ul.appendChild(li)
}
button.addEventListener('click',handleClick)
</script>
您可以检查代码笔上的行为:
https://codepen.io/jenaro94/pen/RwNwyBr
当然,您可以进一步设置每个li元素的样式,并且您可能应该使用模式检查用户写给每个li的子代。
编辑3:
好,这是最后一次编辑,希望对您有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<style>
.outline-editor {
margin: 100px auto;
}
ul {
position: relative;
}
button {
border: 1px solid black;
}
input {
border: none;
}
</style>
<div class="outline-editor">
<ul id="top-level">
Items go here:
<li>
<input type="text" name="content" id="add-text" />
</li>
</ul>
</div>
<script>
const input = document.querySelector('#add-text')
const ul = document.querySelector('#top-level')
function addChild(li) {
let ul = li.tagName === 'UL' ? li : li.querySelector('ul')
if (!ul) {
ul = document.createElement('ul')
li.appendChild(ul)
}
let childLi = document.createElement('li')
let text = document.createElement('input')
text.type = 'text'
text.rows = 1
text.cols = 10
text.focus()
text.addEventListener('keydown',e => {
e.preventDefault()
if (e.keyCode === 9) {
addChild(childLi)
} else if (e.keyCode === 13) {
addChild(li)
}
})
childLi.appendChild(text)
ul.appendChild(childLi)
}
function handleKeyDown(e) {
e.preventDefault();
e.stopPropagation();
let li = document.createElement('li')
if (e.keyCode === 9) {
addChild(this.parentElement)
} else if (e.keyCode === 13) {
addChild(this.parentElement.parentElement)
}
}
input.addEventListener('keydown',handleKeyDown)
</script>
</body>
</html>
,
我可以在Tab键上添加新级别,但是无法跟踪它在内部创建的节点...
const TAB_KEY = 9;
const ENTER_KEY = 13;
let editor = document.querySelector('.editor');
editor.appendChild(document.createElement('li')); // Add initial (for visibility)
editor.addEventListener('focus',(e) => {
//let ul = e.target;
//let li = document.createElement('li');
//ul.appendChild(li);
});
editor.addEventListener('keydown',(e) => {
var code = e.keyCode || e.which;
if (code == TAB_KEY) {
e.preventDefault(); // Stop treating it like an actual tab
let parent = e.target;
let ul = document.createElement('ul');
let li = document.createElement('li');
ul.appendChild(li);
parent.appendChild(ul);
moveCursorToEnd(li);
} else if (code == ENTER_KEY) {
e.preventDefault(); // Stop treating it like an actual line feed
let parent = e.target;
let li = document.createElement('li');
parent.appendChild(li);
moveCursorToEnd(li);
}
});
// See: https://stackoverflow.com/a/55811159/1762224
function moveCursorToEnd(el) {
el.focus();
document.execCommand('selectAll',false,null);
document.getSelection().collapseToEnd();
}
.editor {
font-weight: normal
}
<div class="editor" contenteditable="true" draggable="true"></div>
本文链接:https://www.f2er.com/2990630.html