[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

help with text box & hidden div to resemble drop down list with onfocus help

I need some additional help in this script that was provided to me. Basically what I wanted is to have a textbox resemble the functionality of a drop down box. Everything is working fine as I needed it to be cross browser compatible as well as work with mouse and keyboard navigation. What I am finding is that when you put focus on the textbox and the options appear, after making a selection that if you tab back and give the textbox focus again then the options do not appear again (only in keyboard navigation)

I have attached the code that was provided, hopefully that helps. So the only change that needs to be made is when using keyboard navigation if selection has already been made and textbox is given focus again, then the options should display again to enable selection of a different option.

Thanks
<html>
<head>
<script type="text/javascript">
function options(field,select,divselect)
{
  var field = document.getElementById(field);
  var select = document.getElementById(select);
  var divselect = document.getElementById(divselect);
 
  divselect.style.top = field.offsetTop + field.clientHeight;
  divselect.style.left = field.offsetLeft;
  if (divselect.style.display == 'block')
      divselect.style.display = 'none';
    else
      divselect.style.display = 'block';
 
  select.focus();
  select.options[0].selected= 'true';
}
function optionsoff(element)
{
var divselect = document.getElementById(element);
divselect.style.display = 'none';
}
function SelectOption(field,select,divselect)
{
  var field = document.getElementById(field);
  var select = document.getElementById(select);
  var divselect = document.getElementById(divselect);
  
  field.value = select.options[select.selectedIndex].text;
  
}
function updown(e,select){
var key  = (window.event) ?  event.keyCode : e.keyCode;
var down = 40;
var up = 38;
var enter = 13;
  if((key==up) || (key==down)) select.options[select.selectedIndex].selected= 'true';
  if(key==enter) optionsoff(select.id);
}
</script>
</head>
<body>
<input type="text" name="field" id="field" size="12" onFocus="options('field','select','divselect');">
<div id="divselect" style="display:none;position:absolute;">
  <select name="select" size="5" id="select" style="width: 150px;" onBlur="optionsoff('divselect');" onkeydown="updown(event,this);" onChange="SelectOption('field','select','divselect');" onclick="document.getElementById('divselect').style.display = 'none';">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
        <option value="e">e</option>
  </select>
</div>
<hr/>
<input type="text" name="field" id="field2" size="12" onFocus="options('field2','select2','divselect2');">
<div id="divselect2" style="display:none;position:absolute;">
  <select name="select" size="5" id="select2" style="width: 150px;" onBlur="optionsoff('divselect2');" onkeydown="updown(event,this);" onChange="SelectOption('field2','select2','divselect2');" onclick="document.getElementById('divselect2').style.display = 'none';">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
        <option value="e">e</option>
  </select>
</div>
 
</body>
</html>

Open in new window

0
Pdesignz
Asked:
Pdesignz
  • 2
  • 2
1 Solution
 
EZFragCommented:
Hi there,

I might have found the problem here. The "if" statement in the "options" function seems to be part of the problem here. It is used to turn the display of the options on and off. Which is OK, but after the if statement is finished, the function tries to give focus to the select element. Which again is fine, if the select element is visible. If an element is hidden, and you try to give focus to it, the script would fail (in Internet Explorer). And at least one out of two times the function is called, the select element will be invisible.

Make sure the select element is always visible before giving focus to it.

Hope it helps ^_^

function options(field,select,divselect)
{
  var field = document.getElementById(field);
  var select = document.getElementById(select);
  var divselect = document.getElementById(divselect);
 
  divselect.style.top = field.offsetTop + field.clientHeight;
  divselect.style.left = field.offsetLeft;
  if (divselect.style.display == 'block')
      divselect.style.display = 'none';
    else
      divselect.style.display = 'block';
 
  
  select.style.display = 'block'; //Inserted line to make select element visible before focus
  select.focus();
  select.options[0].selected= 'true';
}

Open in new window

0
 
PdesignzAuthor Commented:
seems that I can shift +tab back to edit the 2nd selection, but am unable to shift + tab to change the 1st selection
0
 
EZFragCommented:
I understand what is happening here, but unfortunately I can't find a workaround.
The elements are place in the following order in the html:

input1
select1
input2
select2

One of the events ("options") forces the select boxes to gain focus when their corresponding input field is selected. So if you press Tab the first time, input1 will gain focus and the "options" event will force that focus onto select1. Press Tab a second time and the focus will move from select1 to input2, because it is the next element in the html. Again, the "options" event will force select2 to become the element which receives the focus.

So now select2 has got the focus. What will happen if you press Shift + Tab? Focus will return back to input2, BUT the event will force the focus back on select2. That is why it is not changing. And it is the same with the select1 element.

Just out of curiosity, is there any specific reason why you are using this method to simulate a combo-dropdown?

0
 
PdesignzAuthor Commented:
Has to do with a healthcare app and what they want is to display a code and when the field gets focus show options with description, and then when tab off show only code again
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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