iOS 8.1: Focus on input (filled with text) pushes cursor out of bounds

[danlevine]

Can use http://ftlabs.github.io/fastclick/examples/input.html or http://ftlabs.github.io/fastclick/examples/focus.html to test.

Seems to only show up on iOS 8 Safari. When an input element is filled with text, and then refocused, cursor moves to the end of the text, but incorrectly places the cursor outside of the input's bounds.

This can lead to user confusion, especially when the text string is long enough to push the cursor off-screen.

[jpsalo]

I'm having similar problem with textarea on iOS 8 where focus puts the cursor likewise to the end of the text.

Is it possible to focus to the position where textarea was clicked/tapped?

I managed to set focus into the tapped position with "needsclick" class plus few other hacks like overriding needsFocus implementation, but then of course, I'm getting the delay :) I thought that using "needsfocus" class would solve it, but it did nothing for me in textareas on iOS 8 Safari.

[szpali76]

I'm having the same problem with an input field, on iOS 8, did you managed somehow to not show the caret out of the input field. Any help would be appreciated.

Thanks.

[jpsalo]

This it what I did for textarea. See the comments.

FastClick.prototype.needsClick = function(target) {
    case 'textarea':
        if (target.disabled || target.value.length) {
        // Request click when textarea has content.
            return true;
        }

        break;
};

FastClick.prototype.needsFocus = function(target) {
    case 'textarea':
        return !target.value.length;    // Request focus when textarea has no content.
};

What it does is firing a fast click (focus) when textarea is empty and a regular click when there is content.

This way the caret will appear into correct position, which is more important for us than fast click. I did not manage to get the best of both words, meaning fast click and correct caret position but something like this could work for input fields as well

[iberghea]

I had the same issue those days but only on IOS 8.1, so maybe my solution will help somebody. The issue came from a div tag which had set a transform CSS property. I solve the problem with the following code:

#your-parent-div {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
}