[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

div tag item select

If I have a div tag with some text listed in it i.e.

<div>
list 1<br />
list 2<br />
list 3<br />
list 4<br />
list 5<br />
</div>

If I have an input type="text" tag above the div tag i.e.

<input type="text">
<div>
list 1<br />
list 2<br />
list 3<br />
list 4<br />
list 5<br />
</div>

how can I use the keyboard arrow keys (up and down) to select the list items in the div tag and have the text appear in the input type="text" box, depending on which item is currently selected?
0
narmi2
Asked:
narmi2
1 Solution
 
amit_gCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<script>
var Key_Up = 38;
var Key_Down = 40;

var g_CurrentIndex = -1;

function OnKeyDownHandler(e)
{
      var key;

      if(window.event)
      {
            key = e.keyCode
      }
      else if(e.which)
      {
            key = e.which
      }

      var oListDiv = document.getElementById("oListDiv");
      var arrList = oListDiv.innerHTML.split("<br>");

      arrList.pop();

      if (key == Key_Down)
      {
            g_CurrentIndex++;

            if (g_CurrentIndex >= arrList.length)
            {
                  g_CurrentIndex = arrList.length - 1;
            }
      }
      else if (key == Key_Up)
      {
            g_CurrentIndex--;

            if (g_CurrentIndex < 0)
            {
                  g_CurrentIndex = 0;
            }
      }

      if ((key == Key_Down) || (key == Key_Up))
      {
            document.getElementById("oInput").value = arrList[g_CurrentIndex];
      }
}
</script>

</head>
<body>

<form>

<input id="oInput" type="text" onkeydown="OnKeyDownHandler(event)">
<div id="oListDiv">
list 1<br />
list 2<br />
list 3<br />
list 4<br />
list 5<br />
</div>

</form>

</body>

</html>
0
 
narmi2Author Commented:
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now