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 () {
    $span.html(
        this.scrollLeft + ', ' +
        this.scrollWidth + ', ' +
        this.selectionEnd
    );
});

Start typing in the input.
When the text overflows, you'll notice that the scrollLeft and scrollWidth values never change.

The <!DOCTYPE html> is set properly. Is there something I'm missing to get the proper scroll values?

回答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.

回答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};
};

来源：https://stackoverflow.com/questions/26193755/input-scrollleft-never-changes-in-ie11

标签

javascript

internet-explorer-11