Annoyances: Input box not accepting focus

I’ve been using the excellent JQuery core library and JQuery-UI libraries for a web application that I’ve been developing. As I wanted to have a desktop application feel to the app, I used a script that prevented the user from being able to select text in the interface, so that when drag and drop functions are used, the user doesn’t end up accidentally selecting swathes of UI text by accident.

I noticed however when developing a user text input box prompt, that I couldn’t get the inputbox in focus. I presumed at first that it was a browser glitch, but testing showed that it occurred in every browser and every text input box element. I set to trawling through my JavaScript (the most likely culprit when a web page suddenly breaks, well, assuming that you’re not using Flash…) and found that one of my drag and drop scripts was handling the “.mousedown” event, and munching the result with a “return false”. As the script had document-level scope, it munched all mouse clicks including the one to gain focus on the text input boxes.
http://blog.matthewashrafi.com/?p=101&preview=true
The solution then; ensure that you don’t have something like this anywhere in your code:

$(document).mousedown(function() {
    // blah
    // blah
    // blah
    return false;
});

A better way of handling the problem whilst still preventing the user from selecting UI text, is to use the “return false;” statement, but with a more specific scope. So for instance if you specified items that you explicitly didn’t want to allow users to click on with the class “no-select”, then you could use the following:

$(".no-select").mousedown{
    return false;
});

Thus the document level scope isn’t involved at all, and you can avoid the sort of annoying problem I encountered. This one also goes down on the list of reasons not to trust third-party scripts blindly, as it was within one of those that the problem originated…

Leave a Reply

Your email address will not be published. Required fields are marked *