Input Scrollleft Never Changes In Ie11

I'm not sure if I'm going crazy or if this is a bug in IE11. Open this demo in IE11: http://jsfiddle.net/zdfubscf/1/ var $span = $('span'); $('input').on('keyup', function () {

Solution 1:

I was also looking for a solution to this problem. It took my a while to find your question (and dit while looking for a solution).

In the meantime I can share you a small work around I've found.

Use the following css attributes in a textarea and set the number of rows to 1.

<textarea id="demo1" cols="40" rows="1" style="white-space: nowrap; overflow: hidden;">Lorem ipsum dolor sit amet, vulputate molestie nec dui.</textarea>

This will allow you to use a textarea as if it was an input of type text. ScrollLeft does work for IE in a textarea.

If you happen to find an alternative for inputs scrollLeft property in IE>9, please share! I hope this workaround is helpful for you.

Solution 2:

Seems, IE only "TextRange" object (deprecated in Edge) can help with IE 11:

var getScrollLeftAndScrollWidth = function (inputElement) {
  var range = inputElement.createTextRange();
  var inputStyle = window.getComputedStyle(inputElement, undefined);
  var paddingLeft = parseFloat(inputStyle.paddingLeft);
  var paddingRight = parseFloat(inputStyle.paddingRight);
  var rangeRect = range.getBoundingClientRect();
  var scrollLeft = inputElement.getBoundingClientRect().left + inputElement.clientLeft + paddingLeft - rangeRect.left;
  var scrollWidth = Math.max(inputElement.clientWidth, paddingLeft + (rangeRect.right - rangeRect.left) + paddingRight);
  return {scrollLeft: scrollLeft, scrollWidth: scrollWidth};
};