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

Question

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

<input type="text">

发生模糊事件时，如果输入的字符串溢出，则显示区域会滚动回开头。我的代码片段似乎并没有阻止这种行为。有什么办法可以实现这个技巧吗？

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

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

Answer 1

preventDefault() 输入的模糊事件不会阻止滚动。您实际需要做的是在模糊发生时捕获输入的 scrollLeft 位置，然后强制浏览器在尝试滚动后重置它。请参阅下面的代码片段。

在模糊时，我们捕获输入的电流 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>

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

Prevent blur behaviour on input element

javascript

html

preventdefault