添加了contenteditable="true"的div中按下回车的时候会新生成一个元素,有没有办法可以控制新生成dom元素的类型
时间: 2023-05-28 12:05:57 浏览: 139
当div设置contentEditable=true时,重置其内容后无法光标定位
5星 · 资源好评率100%
可以使用JavaScript来控制新生成的DOM元素的类型。具体实现方法如下:
1. 给contenteditable="true"的div添加一个事件监听器,监听回车键的按下事件。
2. 在事件监听器中创建一个新的DOM元素,可以使用document.createElement()方法来创建。
3. 根据需要设置新元素的属性和样式。
4. 使用insertBefore()方法将新元素插入到当前光标所在位置的前面,可以使用document.getSelection()和Range对象来获取当前光标所在位置。
5. 最后,使用event.preventDefault()方法阻止默认的回车键行为。
以下是示例代码:
```
var editableDiv = document.getElementById("editable-div");
editableDiv.addEventListener("keydown", function(event) {
if (event.keyCode === 13) { // 判断是否按下回车键
event.preventDefault(); // 阻止默认的回车键行为
var newElement = document.createElement("p"); // 创建新的p元素
newElement.innerText = "New Paragraph"; // 设置新元素的文本内容
// 获取当前光标所在位置
var selection = document.getSelection();
var range = selection.getRangeAt(0);
// 将新元素插入到当前光标所在位置的前面
range.insertNode(newElement);
}
});
```
在上述示例代码中,创建了一个新的p元素,并设置了文本内容为"New Paragraph"。你可以根据需要修改创建的元素类型和设置的属性和样式。
阅读全文