Mooified focus onload but keep backspace intact

You may have heard about Harmen Janssen's technique to focus input fields on pageload and keep the backspace button's history back function intact. I wanted to play with it any my first step was to mooify his ideas.

So inside the domready event I simply did:

function inputify(elem) {
    elem.focus();
    elem.addEvents({
        'keydown': function(event) {
            if (event.key === 'backspace' && !elem.value) {
                history.back();
            }
        }
    });
}

inputify( $('SomeInputfieldById') );

Great, reusable, everthing works fine. Ok, so let's incorporate my ideas from my HTML forms and onclick/onfocus post (basically, select on click instead of focus and pre-fill the input field):

function inputify(elem) { var startvalue = elem.value; elem.select(); elem.addEvents({ 'keydown': function(event) { if (event.key === 'backspace' && elem.value === startvalue) { history.back(); } }, 'click': function() { elem.select(); } }); } inputify( $('SomeInputfieldById') );

Great works fine. Remember pre-filled value and only go back in history when the user hasn't changed it. Done.Wait... oh, noes! The backspace button is supposed to delete the input. Now, most users will unwillingly trigger the history back function. That's as broken as it gets... Well, in theory I could focus the input field instead of selecting it, and use something like caretPos, and only go back in history if it's at the start... But that's not what I had in mind (well not sure what I was thinking anyway...)So I consider this technique unusable for the time being for my own sites. The only times I focus some input field onload is for search functions anyway. There, I'd rather annoy a few users and improve the overall usability of the site. Like Harmen said in his post, don't use onload input focus just because you can ;-)

0 comments

Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.