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

时间:2016-09-02 15:21:11

标签: javascript html preventdefault

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不再显示时,我想阻止回滚自动启动。

1 个答案:

答案 0 :(得分:3)

输入模糊事件的

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>