这是 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)
您可以通过在此函数内部检查掩码是否存在并仅在存在时设置它来使用普通文本字段来执行此操作。