Horizontal and Vertical navigation inside div using arrows along and down the text

Question

I have a HTML div with multi line(more than one line) of text. I need to enable horizontal and vertical navigation using keyboard arrows(up, down, left , right) as in html input fields(text-area, text) along the text or down the next lines.

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

I tried bellow code but its not working

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

@ALOK I tried this on div but did not worked http://stackoverflow.com/questions/28147266/how-do-i-enable-arrow-navigation-on-keyboard-for-a-list-of-div-using-jquery — Satishakumar Awati, Oct 17 '16 at 10:42
that is contenteditable div. What did you tried? share some code — ALOK, Oct 17 '16 at 11:05
you need to make your div editable, something like this https://jsfiddle.net/Ljyrrafd/ — ALOK, Oct 17 '16 at 13:21
@ALOK this is exactly I am looking for thanks. you can answer the question and I will mark it as correct so that other can make use of it — Satishakumar Awati, Oct 17 '16 at 13:31

score 1 · Accepted Answer · answered Oct 17 '16 at 13:42

You can make a div editable by adding contenteditable attribute to true

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

Horizontal and Vertical navigation inside div using arrows along and down the text

1 Answers1