Question

I have had an on-screen keyboard working fine for some time.

I recently had to add jQuery to the system and now it does not work any more. Pressing the button does nothing because the text input no longer has the focus when the button is pressed and I cannot refocus on it from my jscript.

The input html (note the use of the excellent jq_watermark – the reason I need jQuery):

<input class="search jq_watermark" id="barcode" name="barcode" type="text" title="Please enter search criteria."/>

Here’s the html for one of the buttons:

<td onclick="addChar('Q')"><button class="osk" id="Key_Q" value="Q">Q</button></td>

Here’s the addChar script. Note the many attempts to focus the field, all fail now jQuery is present:

// The field the keyboard should edit.
field = document.forms['main'].elements.item('barcode');

function addChar(c) {
  console.log("Char("+c+")");
  field.focus();
  if(field.maxLength == -1 || field.value.length < field.maxLength) {
    // Handle different browsers.
    if (field.selectionStart || field.selectionStart == '0') {
      var start = field.value.substr(0,field.selectionStart);
      var end = field.value.substr(field.selectionEnd,field.length);
      field.value = start + c + end;
    } else if (document.selection) {
      field.focus();
      var range = document.selection.createRange();
      range.text = c;
      range.moveStart('textedit',1);
      range.select();
    } else {
      field.value = field.value + c;
    }
    field.focus();
  }
  return false;
}

I had to add this to stop the buttons submitting the form. I suspect this is where I need to put new stuff but being new to jQuery I have no idea what:

$("button.osk").click(function(event){
  // Stop it submitting in case the keyboard is inside a form.
  event.preventDefault();
});

P.S. I am aware of the neat jQuery popup keyboards around and would love to replace mine with theirs but that is not an option right now.

Answer 1

Problem solved:

It seems the issue was here:

field = document.forms['main'].elements.item('barcode');

Apparently the arrival of jQuery makes this not work. I have temporarily replaced it with:

var field;
$(document).ready(function(){
   field = document.forms['main'].elements['barcode'];
});

Note that I am wrapping it in a ready function AND not accessing it through items. This does not work in IE8. I will have to fix that.