如何解決當第一個輸入屏幕上的標籤點擊滾動到頂部。只在Chrome中

Question

如何修復此問題website？內底部表單。我在第二個輸入（電話）上使用input mask。 當我禁用這個插件標籤工作正常。

這是我的代碼輸入掩碼：

$(".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) 

您可以通過這個功能裏面檢查，看面具的正常文本字段這樣做是存在，如果是隻設置它。