Satishakumar Awati Satishakumar Awati - 1 month ago 5
jQuery Question

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

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);
}
});

Answer

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>