Question

I have to implement a simple onscreen keyboard, where the user has to first click on one of 10 input boxes (to give it focus), then use the onscreen keyboard to add letters to the focused input.

The problem that I am having is that in IE (7, 8 and 9), the letters are being added to the 5th input box every time, regardless of which input box is trying to take focus.

Can anyone please clarify why this is happening?

Below I provide code, which works perfectly in Chrome and Firefox.

<img onClick='addIt("q")' src = 'images/alphabet/q.png' style='width:50px;height:50px;cursor:pointer'></div>

When clicking on the image, it calls the JS function “addIt(‘q’)” which is defined below:

function addIt(key){
  selectedElement = (document.forms["foo"].elements["focusedField"].value!='')?document.forms["foo"].elements["focusedField"].value:"bar";
  d = document.forms["foo"].elements[selectedElement];
  d.value =  d.value + key;
}

The focusedField is assigned when clicking on the inputbox, which is of password type for the required functionality (the user should not see what he is entering).

<input type='password' name='4_1' id = '4_1' onFocus='document.forms["foo"].elements["focusedField"].value = this.name'/>

Answer 1

That’s because you are using field names that starts with a number.

When you use document.forms["foo"].elements["4_1"], Internet Explorer interprets that as document.forms["foo"].elements[4] and gives you the fifth element in the form.

Just make the field names starts with a letter, like:

<input type='password' name='x4_1' id='x4_1' ...