How to fix when tab clicked on first input screen scroll to top. Only in Chrome

Question

How to fix this on website? Inside bottom form. I use input mask on second input (telephone). And when i disable this plugin tab work fine.

This my code inputmask:

$(".tel").inputmask("+7 999 999 9999",{
    placeholder: " ",
    clearMaskOnLostFocus: true,
    showMaskOnHover: false,
    "oncomplete": function(){
        $(this).removeClass('error-input');
        $(this).addClass('valid-input')
    },
    "onincomplete": function(){
        $(this).siblings('.valid-tel-hint').hide();
        $(this).removeClass('valid-input');
    },
    "oncleared": function(){
        $(this).siblings('.valid-tel-hint').hide();
        $(this).removeClass('valid-input');
        $(this).removeClass('error-input');
    }
});

score 0 · Answer 1 · answered Apr 14 '15 at 14:43

This is a bug in chrome, here is a discussion of it: Chrome Tab Scroll Bug

It is a bug with tabbing to text fields that already have data in them. Creating an input mask on a field with some static text (such as your +7 above) will put text in the field when tabbing to it, thus causing the bug. Even without the input mask, you can reproduce by putting text in plain fields, and tabbing back and forth between them.

I have put together a small, hacky solution that works. The trade-off is that when you tab to the field, there is a very quick 'flash' of the text. Slightly annoying, but way better than scrolling the user off screen!

**Note I'm a javascript newbie, so I'm sure there are better ways to accomplish this.

// create a closure around the field to keep the value scoped
var ChromeScrollFixForInputMaskTextField = function(text_field, default_value, mask_options)

    // set the starting value
    var input_value = text_field.val() !== '' ? text_field.val() : default_value;

    text_field.inputmask(mask_options);

    // When tabbing in, clear the value, and add it back after 10 milliseconds.
    // You can experiment with that time, just has to be long enough for Chrome
    //  to have acted trying to scroll to a filled text field.
    text_field.on('focus', function () {
        text_field.val('');
        setTimeout(function () {
            text_field.val(input_value);
        }, 10);
    });

    // Save the value when tabbing out so you can 'cheat' later
    text_field.on('blur', function () {
        input_value = text_field.val();
    });

};

// To use, simply grab a text field, and create the closure
my_text_field = $('#my_text_field');
mask_options = { mask: "9[999][.][99]", 'placeholder': '', greedy: false }
new ChromeScrollFixForInputMaskTextField(my_text_field, '1.0', mask_options)

You could do this with normal text fields by checking inside this function to see of the mask is present and only setting it if so.

How to fix when tab clicked on first input screen scroll to top. Only in Chrome

1 Answers1