Question

这是我的HTML代码

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

当用户点击第一个li时，内容变得可编辑，同样在第二个div上发生。现在的要求是，在第一个li上编辑时，如果用户按下回车键，我需要先停止编辑第一个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演示是here。

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 demo example

感谢。

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

3 个答案: