如何模擬內容編輯元素上進行編輯的點擊

Question

這裏是我的html代碼

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

當第一李用戶點擊，內容變爲可編輯，同樣發生在第二個div。現在需求是，在第一次編輯時，如果用戶按下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演示是here。

Answer 2

變化$(e.currentTarget).siblings('li').click();到$(e.currentTarget).next('li').focus();

Answer 3

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

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

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

也.siblings('li')將移動它列表中的最後一個元素，

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

試試這個jsfiddle demo example

感謝。