Tab-like keyboard navigation with plus sign in HTML form

Question

I have a .NET WebForms page with Telerik UI for ASP.NET AJAX with an HTML form.

• The tab key navigates through fields on the form as expected. If the field has default contents, they are selected on focus to make it easier to change.
• The plus sign key also navigates through the fields via some custom javascript (see below) on the form; however, when navigating with the plus sign into a field with a default value, the default value is not highlighted on first focus right after page load. If I plus back into it again for a second time after page load, though, the default contents are highlighted as expected.

What do I need to tweak to cause existing default contents of a field to be highlighted on focus with the plus sign key?

function handlePlusKey(event) {
    if (event.keyCode == 107) {
        var control = this;
        var found = false;
        $(tabTypes).each(function (i) {
            if (this.className.indexOf('rtsLink') == -1
                    && this.id.indexOf('InitInsertButton') == -1
                    && this.title != "Click here to sort"
                    && this.tabIndex > -1
                    && $(this).is(":visible")
                    && !$(this).is(":disabled"))
                if (this == control) {
                    found = true;
                }
                else if (found) {
                    this.focus();
                    found = false;
                }
        });
        event.preventDefault();
    }
}

Answer 1

Try adding the selection manually

inputElement.focus();
inputElement.setSelectionRange(0, inputElement.value.length);

Change inputElelemnt to the element that needs to be highlighted. In most cases this would be event.target, I think it's control in your case.