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

Question

这是一个特定于 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>

我希望有一种更直接的方法来确定上述内容，而无需将样式忠实地复制到另一个元素。我知道它可能是 'best' 选项，但我真的想让 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);

Answer 1

我已经检查了 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' : '');
  }
}

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

(IE Specific) How to determine if entered text is longer then input element's width

html

javascript

internet-explorer

Fiddle