Question

I have an input box that is inside of a div, the div has a background image and the input box inside of it is positioned and limited in size / font to work nicely with the background image. In FF everything works as expected, in IE though there is a major issue. I can’t select the text inside of the input box using the mouse or use short-cuts like shift-end/home, ctrl-left/right. You can move around using the mouse keys and use the delete/backspace keys to adjust the text. The HTML looks something like this:

<div class='my_container'>
  <input type='text' name='my_text_input' class='my_input' />
</div>

Any insight would be greatly appreciated.

I would like to add some more information, i’m attaching a Dojo dnd Target to the outside div. If I don’t attach the dnd then I can do the selection, once i’ve attached the dnd, i can’t select the text anymore.

Answer 1

It seems that this is rather straight forward once one digs through the code being executed by dojo!!!

In the object being passed to the dojo.dnd.Target constructor, one needs to set the skipForm attribute to true.

so, it looks something like this:

var dndTarget = new dojo.dnd.Target(searchBox, {
  isSource: false,
  copyOnly: true,
  selfCopy: false,
  selfAccept: false,
  skipForm: true  // <-- THIS IS THE FIX
});

This seems to tell dojo not to connect to the input elements and thus works as expected in IE.