javascript - contenteditable 中的嵌套列表
问题描述
我目前正在尝试在树层次结构中自动创建项目符号点,当您按 Tab 时,您将转到主要点的子点。
它旨在类似于 Microsoft Word 中的大纲。但是,我正在努力从下面的代码中目前应该采取什么方法,我只能创建一个点列表,但我希望能够缩进一些它们将与项目符号一起向右移动的点观点。
function list() {
let ul = document.getElementById("ul");
let li = document.createElement("li");
ul.appendChild(li);
}
<div id="ul" contenteditable="true" class="editor" draggable="true" onfocus="list()" style="font-weight:normal;">
</div>
解决方案
如果我猜对了,您只需要在父 ul 上设置一个填充,这很有趣,它们已经设置好了,如果您想进一步缩进它,您可以为其添加更多填充,但从您的示例中它是不够清楚,你没有为li设置innerHtml或innerText,另一方面,如果你想聚焦一个div,你应该为它设置一个tabindex。
编辑:我之前没有发现您使用 id 为 ul 的 div,您仍然可以添加一个内部子 li,但这没有多大意义,如果您仍然决定采用这种方式,您可以为每个 li 设置样式child 具有相同的余量,并将 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>
您可以检查 codepen 上的行为:
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>
推荐阅读
- google-cloud-platform - 在 Google Cloud Platform 中设置 FTP
- usb - 通过 libusb 的 Windows 复合设备(usb 音频类和自定义批量接口)?
- python - 带有“或”的函数的条件语句
- ios - iOS 14:UNUserNotificationCenter requestAuthorizationWithOptions 总是失败并显示“此应用程序不允许通知”
- c++ - 每次调用文档时,如何获取读取文档下一行的函数?
- python - 将.Spe文件放入Python中的数组
- python - Python 将三行 .split() 合并为一行?
- python - Python 将重复类别名称的字典从 SQL 查询重新排列为单个类别名称作为键
- perl - tasklist -v 截断输出
- python - 如何使用 Python 将 byte3 转换为 int