Question

I am experiencing a weird issue with the jquery-ui tab object. If I highlight the text of an html input tag (type=”text”) that is on a tab, switch tabs, then come back to the original tab, this text is still highlighted. I can actually remove the highlighting before switching tabs, and when I come back, the text has been highlighted again. I have tried to remove this highlighting by calling .blur() on the textbox after the show event of the tab is triggered, but this does not work. Similarly, actually clicking on other parts of the page (which I take blur() to be the equivalent of) does not remove the highlighting of the text. Is there something else I could be doing here?

Thanks.

Answer 1

I have solved the issue at hand by modifying the selectionStart property of the input DOM object. By setting it equal to the selectionEnd property, you ensure no text is highlighted. The selectionStart property was being changed on my original highlighting, so when I came back to the tab, the text was re-highlighted. Solution below.

$(this).find('input').each(function () {
    var input = document.getElementById($(this).attr("id"));
    try {
        input.selectionStart = input.selectionEnd;
    }
        catch (err) {
    }
});