jquery - 当选项卡单击第一个输入屏幕滚动到顶部时如何修复。仅在 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 中的一个错误，这里是对其的讨论:Chrome Tab Scroll Bug

这是一个使用 Tab 键切换到已包含数据的文本字段的错误。在包含一些静态文本(例如上面的 +7)的字段上创建输入掩码会在按 Tab 键切换到该字段时将文本放入该字段中，从而导致该错误。即使没有输入掩码，您也可以通过将文本放入纯文本字段中并在它们之间来回切换来进行复制。

我整理了一个可行的小型、hacky 解决方案。代价是，当您使用 Tab 键切换到该字段时，文本会非常快速地“闪烁”。有点烦人，但比将用户滚动到屏幕之外要好得多!

**注意我是一个 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)

您可以使用普通文本字段来执行此操作，方法是检查此函数内部以查看掩码是否存在，并且仅在存在时才设置它。