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

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

本文关键字：输入元素是否文本何确定 IE 特定更新时间：2023-09-26

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

有没有办法确定输入字段中的文本是否溢出了 IE 中输入元素宽度的绑定？

下面是一个简单的例子来检查客户端宽度与滚动宽度

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' : '');
  }
}

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

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

小提琴