在 div 內使用箭頭沿文本進行水平和垂直導航

Question

我有一個多行（多於一行）文本的 HTML div 。 我需要使用鍵盤箭頭（向上、向下、向左、向右）啟用水平和垂直導航，就像在 html 輸入字段（文本區域、文本）中沿着文本或向下行一樣。

<div id='enabled_arrow_navigation'>
 Horizontal and Vertical navigation inside, div using arrows along and down the text, 
 Horizontal and Vertical navigation inside div using arrows along and down the text
 Horizontal and Vertical navigation inside div using arrows along and down the text
</div>

我試過波紋管代碼但它不工作

$("#enabled_arrow_navigation").keyup(function(e) 
{
    if (e.keyCode == 40) 
    {  
        Navigate(1);
    }
    if(e.keyCode==38)
    {
        Navigate(-1);
    }
});

Answer 1

您可以通過將 contenteditable 屬性添加到 true 來使 div 可編輯

 <div id='enabled_arrow_navigation' contenteditable='true'> Horizontal and Vertical navigation inside, div using arrows along and down the text, Horizontal and Vertical navigation inside div using arrows along and down the text Horizontal and Vertical navigation inside div using arrows along and down the text </div>