Как исправить, когда вкладка нажата на первом экране ввода, прокрутите вверх. Только в Chrome

Question

Как исправить это на website? Внутри нижней формы. Я использую input mask на втором входе (телефон). И когда я отключу эту вкладку плагина, работайте нормально.

Это мой код 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'); 
    } 
}); 

Answer 1

Это ошибка в хроме, вот его обсуждение: Chrome Tab Scroll Bug

Это ошибка с табуляцией текстовые поля, которые уже есть данные в них , Создание маски ввода в поле с каким-то статическим текстом (например, ваш +7 выше) будет помещать текст в поле при его табуляции, тем самым вызывая ошибку. Даже без маски ввода вы можете воспроизводить, помещая текст в простые поля и перемещаясь между ними.

Я собрал небольшое, хакерское решение, которое работает. Компромисс заключается в том, что при входе в поле появляется очень быстрая «вспышка» текста. Немного раздражает, но лучше, чем прокрутка пользователя с экрана!

** Примечание. Я новичок в javascript, поэтому я уверен, что для этого есть лучшие способы.

// 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) 

Вы можете сделать это с помощью обычных текстовых полей, проверяя внутри этой функции, чтобы увидеть маски присутствует и только установить его, если так.