Question

我不确定我是否会疯狂，或者这是IE11中的错误。

在IE11中打开此演示：http://jsfiddle.net/zdfubscf/1/

var $span = $('span');
$('input').on('keyup', function () {
    $span.html(
        this.scrollLeft + ', ' +
        this.scrollWidth + ', ' +
        this.selectionEnd
    );
});

开始输入输入。
当文字溢出时，您会注意到scrollLeft和scrollWidth值永远不会改变。

<!DOCTYPE html>设置正确。有什么我缺少得到正确的滚动值吗？

Answer 1

我也在寻找这个问题的解决方案。我花了一段时间才找到你的问题（并在寻找解决方案时dit）。

与此同时，我可以与您分享一些我找到的小作品。

在textarea中使用以下css属性，并将行数设置为1。

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

这将允许您使用textarea，就好像它是类型文本的输入一样。 ScrollLeft确实适用于textarea中的IE。

如果您碰巧在IE＆gt; 9中找到输入scrollLeft属性的替代方法，请分享！我希望这种解决方法对您有所帮助。

Answer 2

似乎只有IE＆＃34; TextRange＆＃34;对象（在Edge中已弃用）可以帮助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};
};

输入scrollLeft在IE11中永远不会改变

2 个答案: