如何修复选项卡单击第一个输入屏幕滚动到顶部。仅在 Chrome 中

Posted 2023-02-22

【中文标题】如何修复选项卡单击第一个输入屏幕滚动到顶部。仅在 Chrome 中

【英文标题】：How to fix when tab clicked on first input screen scroll to top. Only in Chrome

【发布时间】：2015-04-06 12:33:53

【问题描述】：

如何在website 上解决此问题？内底形式。我在第二个输入（电话）上使用input mask。 当我禁用此插件选项卡时工作正常。

这是我的代码输入掩码：

$(".tel").inputmask("[phone]",
    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');
    
);

【参考方案1】：

这是 chrome 中的一个 bug，这里有一个讨论：Chrome Tab Scroll Bug

这是一个对已经包含数据的文本字段进行制表符的错误。在带有一些静态文本的字段上创建输入掩码（例如上面的 +7）将在按选项卡时将文本放入字段中，从而导致错误。即使没有输入掩码，您也可以通过将文本放在普通字段中并在它们之间来回切换来重现。

我已经制定了一个可行的小型、hacky 解决方案。折衷方案是，当您选择该字段时，文本会非常快速地“闪烁”。有点烦人，但比将用户滚动到屏幕外要好得多！

**请注意，我是 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)

您可以通过在此函数内部检查是否存在掩码并仅在存在时设置它，来对普通文本字段执行此操作。