html标签加上可编辑回车监听

> 以下是一个实现标签可编辑和回车监听的示例代码：

HTML代码：
```html
<ul id="editable-list">
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ul>
```
JavaScript代码：
```javascript
const list = document.getElementById('editable-list');

list.addEventListener('keypress', function(event) {
  const target = event.target;
  if (event.key === 'Enter' && target.nodeName === 'SPAN') {
    event.preventDefault();
    const li = target.parentElement;
    const nextLi = li.nextElementSibling;
    const newLi = document.createElement('li');
    const newSpan = document.createElement('span');
    newSpan.contentEditable = true;
    newLi.appendChild(newSpan);
    list.insertBefore(newLi, nextLi);
    newSpan.focus();
  }
});
```
以上代码中，我们在可编辑的`span`元素上监听`keypress`事件，当用户按下回车键时，我们会阻止默认行为（即插入回车符），然后创建一个新的li元素和`span`元素，并将其插入到当前li元素的后面。最后，我们使用`focus()`方法将光标定位到新添加的`span`元素中，以便用户继续输入内容。注意，我们需要使用`createElement()`方法来创建新的元素，并设置`contentEditable`属性为`true`，以便使其可编辑。

> 请注意，以上代码仅仅是一个简单的示例，还有一些边界情况和错误处理需要考虑。此外，由于`contenteditable`属性会使得浏览器的默认行为和事件响应方式发生变化，因此需要谨慎使用。

相关推荐

近期文章