display a div below a selected input field? No JQuery

Question

how to display a div everytime a user focus on a input field. there is already a div and it is hidden. the position of the div will change depending on the position of the s

Answer 1

Try the following:

 formSelectedFieldInput.addEventListener("focus", setDivToInput, false);

 function setDivToInput(e)
 {
      var inputElement = e.target; //e.target refers to the element that fired the event.
      formFieldListWrapper.style.top = inputElement.offsetTop + formFieldListWrapper.offsetHeight + "px";
      formFieldListWrapper.style.left= inputElement.offsetLeft + "px";
      formFieldListWrapper.style.display = "block";
 }

The first line adds a focus event to the input. This sets the div to the input based upon it's position on the page. This is very basic and doesn't behave well when the div runs of the screen. You need to add logic for that.

Now for multiple inputs in a form

var nodes = form.querySelectorAll("input"); //replace with your form element
for (var i = 0; i < nodes.length; ++i)
{ 
    nodes[i].addEventListener("focus", setDivToInput, false); 
}

 function setDivToInput(e)
 {
      var node = e.target;
      formFieldListWrapper.style.top = node.offsetTop + formFieldListWrapper.offsetHeight + "px";
      formFieldListWrapper.style.left= node.offsetLeft + "px";
      formFieldListWrapper.style.display = "block";

 }

This code sets the focus event to all inputs in the form.