（特定于IE）如何确定输入的文本是否长于输入元素的宽度

Enzey 发表于 Dev

恩泽

这是IE特定问题，所有版本。在所有其他浏览器中，当文本溢出时，输入元素的scrollWidth大于输入元素的clientWidth。

有没有办法确定输入字段中的文本已溢出IE中输入元素宽度的键？

以下是检查clientWidth与scrollWidth的简单示例

var myInput = document.body.querySelector('#myInput');
myInput.value = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem';

function checkInputSize() {
    alert('Client Width: ' + myInput.clientWidth + '\n' +
          'Scroll Width: ' + myInput.scrollWidth);
}

<div>
    <input id="myInput"></input>
</div>

<button onclick="checkInputSize()"
        style="margin-top: 2em;">
    <span>Display Input Size</span>
</button>

我希望有一种更直接的方法来确定上述内容，而无需将样式忠实复制到另一个元素。我知道这可能是“最佳”选择，但我真的想让IE受益，因为它比这更好。

如果我需要复制样式，最好的选择是使用window.getComputedStyle，尽管IE8不支持该功能，这对我来说并不重要。

var getJsStyleName = function(styleName) {
    var firstCharacterRegex = new RegExp('^.');
    styleName = styleName.split('-');
    for (var i = 1; i < styleName.length; i++) {
        styleName[i] = styleName[i].replace(firstCharacterRegex, styleName[i][0].toUpperCase());
    }
    return styleName.join('');
};

var copyComputedStyles = function(toElement, fromElement) {
    var comStyle = window.getComputedStyle(fromElement) );
    for (var i = 0; i < comStyle.length; i++) {
        var styleName = getJsStyleName(comStyle[i]);
        toElement.style[ styleName ] = comStyle[ styleName ];
    }

    return toElement;
}


var inputStyledDiv = copyComputedStyles(document.createElement('div'), inputElement);

里克·希区柯克

我已经检查了IE中使用的确实会溢出输入框且不会溢出输入框的文本中的所有计算样式。所有样式都相同。

一种替代方法是在div中复制输入内容，并查看其clientWidth是否比输入的clientWidth宽。您必须小心在div中复制所有输入的样式。

下面的代码通过myInput对进行迭代来做到这一点currentStyle。该属性在Chrome中不可用，在这种情况下，它将恢复为您的scrollWidth>clientWidth逻辑。

function checkInputSize() {
  var contents= document.querySelector('#contents');
  var output= document.querySelector('#output');
  var st= myInput.currentStyle;
  if(st) {
    for(var i in st) {
      contents.style[i]= st[i];
    }
    contents.innerHTML= myInput.value;

    output.innerHTML= contents.clientWidth+(contents.clientWidth >= myInput.clientWidth ? ': overflow' : '');
    contents.style.display= 'none';
  }
  else {
    output.innerHTML= myInput.scrollWidth+(myInput.scrollWidth > myInput.clientWidth ? ': overflow' : '');
  }
}