javascript events and html.

Question

Hi folks,

Could you suggest the best way to keep focus on a particular input field on page? What I am trying to say is, no matter where user clicks on the screen, the focus should return back to this one particular input. I am thinking of a timer function that would check for focus every 500ms and if its not there, then bring it back. Also the best way to submit this input field without making use of any button Any other and best solution for this?

Answer 1

Even if I don't like the idea, thinking about usability and user experience. Anyway, to answer your question, your best shot probably is to set the focus initially to that input element and watch for the blur event. Addionally you might want to check for outside click events.

That might look like this:

$('#test').bind('focusout', function(e) {
    if($(this).val() !== 'releaseme') {
        setTimeout(function() {
           $(e.target).focus();
       }, 25);
    }
});

That would force the focus to that input (with the ID "test") 25ms after it lost the focus. To check for the additional outside-click check this link.

Example link: http://www.jsfiddle.net/FX79h/

Again, this sounds not usefriendly. You might want to think about whatever you are trying to do.

Answer 2

Would be a major impediment to disabled accessibility consideration. Remember, some people don't use mice to navigate, and you'd render the site useless to them.

As to allowing submit, you could trap the enter keystroke via Javascript...there's several tutorials on how to do it. However, this would also negatively affect the expected user interaction pattern and disrupt accessibility aids. The button text is the only thing telling a blind user's screen reader that they can submit to the site. Without it, your site is a black hole to them.

I'm all for experimentation and pushing the envelope, but there are reasons that you see so many common elements across the web. Think about it like this--would you stop for a triangular blue stopsign? How about a square pink one? Believe it or not, familiar patterns make for a more comfortable experience. How you "push" familiarity is what determines your success as a UI person. I might add that there's a LOT of bad UI out there....