Selecting Form Field Breaks Backspace Button Functionality

Until yesterday, there was JavaScript function on this web site, which selected the first form input field when page loads. The same functionality is implemented at Google homepage. Some users don’t use mouse for basic browsing (such as going back to previous page), it’s discovered that if input field is focused or selected, there’s no way to go back by pressing backspace. So i removed it this morning, but left some functionality. When user focuses input field by himself, the script selects default input field value (not just placing cursor after it), so the user doesn’t have to delete it.

Onfocus–Select

function selectWhenFocused() {
    // checks if there's form element in the document:
    if (document.forms) {
        // loops through all forms in the document:
        for (var i = 0; i < document.forms.length; i++) {
            var forma = document.forms[i];
            var eles = forma.elements;
            // loops through elements of the form:
            for (var j = 0; j < eles.length; j++) {
                if (eles[j].type == 'text') {
                    eles[j].onfocus = function () {
                        this.select();
                    }
                }
            }
        }
    }
}
window.onload = function() {
	selectWhenFocused();
        // place here all other functions you want to call when page loads
}

Have a nice day!

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?