Prevent blur behaviour on input element

Question

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

<input type="text">

Upon the blur event,if the string typed in the input would overflow, the shown area is scrolled back to the start. My snippet does not seem to prevent that behaviour. Is there any way to pull this trick off?

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

When input lose focus bbb is no longer shown,I would like to prevent the scroll back to start automagically.

You're welcome amigo. Check out [this question](http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox) and the question it links to for related info to your problem — nem035, Sep 02 '16 at 15:34

score 4 · Accepted Answer · answered Sep 02 '16 at 18:25

preventDefault() on an input's blur event does not prevent the scrolling. What you'll actually need to do is capture the input's scrollLeft position when the blur happens and then force the browser to reset it after it tries to do the scroll. See the code snippet below.

On blur, we capture the input's current scrollLeft. Next, we reset the scrollLeft position wrapped in a window.setTimeout() to ensure the browser waits to render the queued change.

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

1 Answers1