防止输入元素上的模糊行为

Question

document.body.querySelector("input").addEventListener("blur",
  function(e) {
    e.preventDefault()
  });

<input type="text">

在模糊事件发生时，如果输入的字符串溢出，显示的区域将滚动回开始。我的 sn-p 似乎并没有阻止这种行为。有什么办法可以摆脱这个把戏吗？

input.value =   "aaaaaaaaaaabbb"
input.sketch = "|___________|"   
inpur.ideal  =    "|___________|"  //just an aligned visual aid 

当输入失去焦点 bbb 不再显示时，我想防止回滚自动开始。

Answer 1

preventDefault() 在输入的模糊事件上不会阻止滚动。您实际需要做的是在发生模糊时捕获输入的scrollLeft 位置，然后在尝试滚动后强制浏览器将其重置。见下面的代码sn-p。

在模糊时，我们捕获输入的当前scrollLeft。接下来，我们重置包裹在window.setTimeout() 中的scrollLeft 位置，以确保浏览器等待呈现排队的更改。

document.body.querySelector("input").addEventListener('blur', function(event) {
  var scrollLeft = event.target.scrollLeft;
  window.setTimeout(function () {
    event.target.scrollLeft = scrollLeft;
  }, 0);
}, false);

<input>