document.onmousemove / onmmouseup prevent selecting text in IE input or textarea

Question

whenever i alter the onmousemove or onmouseup attributes of the document, for example:

document.onmousemove = myOnMouseMove;

document.onmouseup = myOnMouseUp;

It prevents me from selecting text in any input type='text' or textarea elements in internet explorer (have tried in ie7 and ie8, fine in firefox). If I remove either of these it allows me to select text again, but i really need both to make my home made drag and drop functionality work elsewhere on the page.

Is there some way i can retain the default functionality of the onmouseXXX functions and attach my function onto the end? Or is there a better way to be doing this?

I also have the same problem using the onkeyup attribute of a textarea forcing the flashing text cursor to the end of the text.

Thanks

Answer 1

If you need drag-and-drop, which seems to be the reason to want this in the first place, I can warmly recommend not trying to code that yourself. Instead, use a popular framework like YUI, or jQuery. They are reasonably lightweight and offer reasonable cross-browser compatibility. Really, it's no fun reinventing this wheel.

Answer 2

You should be fine so long as you don't return false from your event handler functions or mess with the user selection. Alternatively, you could check the event's target in the event handler to filter out <input>s and <textarea>s:

document.onmousedown = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    var tagName = target.nodeName.toLowerCase();
    if (tagName == "input" || tagName == "textarea") {
        // Do nothing
    } else {
        // Do your stuff
    }
};