javascript - 如何模拟内容可编辑元素的可编辑点击

Question

这是我的html代码

<ul class="options-list">
    <li contenteditable="true">Customer List</li>
    <li contenteditable="true">Product List</li>
</ul>

当用户点击第一个 li 时，内容变为可编辑，第二个 div 也是如此。现在的要求是，在编辑第一个 li 时，如果用户按 Enter 键，我需要停止编辑第一个 li 并移动到第二个 li 并自动启动编辑模式。

这是我的 JS 代码

$('.options-list').on('keypress', 'li', function (e) {
    if (e.keyCode === 13) {
        $(e.currentTarget).blur(); //this works
        $(e.currentTarget).siblings('li').click(); // this doesn't work
        return false;
    }
})

任何帮助，将不胜感激

Answer 1

而不是.click()，您可以使用.focus().

例如：

$('.options-list').on('keypress', 'li', function (e) {
    if (e.keyCode === 13) {
        $(e.currentTarget).blur(); 
        $(e.currentTarget).siblings('li').focus(); 
        return false;
    }
})

一个 jsfiddle 演示在这里。

Answer 2

更改$(e.currentTarget).siblings('li').click();为$(e.currentTarget).next('li').focus();

Answer 3

而不是使用.siblings('li').click();

您可以使用.next('li').focus();

这将帮助您将焦点移至下一个 li 元素，

也会.siblings('li')将它移到列表的最后一个 li 元素，

但.next()会将焦点连续移动到下一个 li 元素。

试试这个jsfiddle 演示示例

谢谢。