如何模擬內容可編輯元素的可編輯點擊

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演示。

Answer 2

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

Answer 3

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

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

這可以幫助您將焦點移動到下一個li元素，

同時.siblings('li')會將它移動到列表的最后一個li元素，

但.next()會將焦點連續移動到下一個li元素。

試試這個jsfiddle演示示例

謝謝。