（IE特定）如何确定输入的文本是否比输入元素的宽度长 [英] (IE Specific) How to determine if entered text is longer then input element's width

问题描述

这是一个IE特定的问题，所有版本。
在所有其他浏览器中，当文本溢出时，input元素的scrollWidth大于input元素的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 +'\\\
'+'Scroll Width：'+ myInput.scrollWidth）;}  

 < div> < input id =myInput>< / input>< / div>< button onclick =checkInputSize（）style =margin-top：2em;> < span>显示输入尺寸< / span>< /按钮>  

我希望有一种更直接的方式来确定上述内容，而不需要忠实地将样式复制到另一个元素。我知道这可能是'最好'的选择，但我真的想给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）; 
  

解决方案

这样做并不会溢出输入框。所有样式都是相同的。

另一种方法是复制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'：''）; 
} 
} 
  

Fiddle

This is an IE specific issue, all versions. In all other browsers the scrollWidth of the input element is greater then the clientWidth of the input element when the text overflows.

Is there a way to determine that the text in the input field has overflowed the bonds of the input element width in IE?

Below is a simple example to check the clientWidth vs the 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>

I am hoping there is a more straight forward way to determine the above without requiring faithful replication of styles to another element. I understand that it may be the 'best' option but I really wanted to give IE the benefit of the doubt that it was better than that.

If I need to replicate the styles the best bet would be to use window.getComputedStyle, although IE8 does not support this feature that is not a concern to me.

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);

解决方案

I've examined all computed styles in IE using text that does and does not overflow the input box. All styles are identical.

An alternative is to duplicate the input contents within a div, and see if its clientWidth is wider than the input's clientWidth. You have to be careful to duplicate all the input's styles within the div.

The code below does so by iterating through myInput's currentStyle. This property is not available in Chrome, in which case it reverts to your scrollWidth > clientWidth logic.

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

Fiddle

这篇关于（IE特定）如何确定输入的文本是否比输入元素的宽度长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！