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。接下来，我们重置包含在scrollLeft中的window.setTimeout()位置，以确保浏览器等待呈现排队的更改。

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

<input>

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

1 个答案: