Move selection to the end on narrowed element

Question

I'm writing an app in phonegap with a specific 'zoom-in' effect when clicking on an input element (everything but the input hides and custom typeahead suggestions are shown). The view is written using backbone.js and i'm entering the 'zoomed-in' mode on focus:

events: {
            'focus .search': 'startSearch',
}

In my startSearch method i'm doing all the logic to immitate the zoom-in effect.

    _moveCursorToEnd: function(element) {
        var val_len = element.value.length;
        element.scrollLeft = val_len * 9;
        setTimeout(function() {
            element.selectionStart = val_len;
        }, 1);
    },

    startSearch: function() {
        window.navbar.hide();
        this.$input.addClass('search-input-small');
        this.$cancel.show();

        var el = this.$input[0];
        this._moveCursorToEnd(el);

    },

The search-input-small makes the input smaller.

The setTimeout in _moveCursorToEnd is required because the effect doesn't work otherwise. The issue is that despite setTimeout having 1msec, it looks like a second cause inconvenient cursor move.

Is there any way to move the cursor to the end that would work on Safari Mobile 6 (iOS 6+) without the ugly delay?

Answer 1

I've ended up changing the event from focus to click and using similar code as mentioned above so that it works. Seems like the selection from a click that focused the text edit is applied after focus handler and before click handler.