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

How to simulate editable click on content editable element

本文关键字：编辑 元素 何模拟 模拟      更新时间：2023-09-26

这是我的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;
    }
})

任何帮助将不胜感激

代替.click()，你可以使用 .focus() 。

例如：

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

一个jsfiddle演示在这里。

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

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

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

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

此外，.siblings('li')会将其移动到列表的最后一个 li 元素，

但.next()会连续将焦点转移到下一个 Li 元素上。

试试这个 jsfiddle 演示示例

谢谢。

相关文章：