入力（type = text）要素のテキストがFireFoxの境界を超えているかどうかを検出

Question

入力（type = text）要素の内容（value）がそのサイズを超えているかどうかを検出する方法はありますか？

これが当てはまる場合、Internet Explorerでは、scrollWidthプロパティはstyle.widthより大きくなります。しかし、FirefoxではscrollWidthは常にstyle.widthに等しく、既知のバグ（https://bugzilla.mozilla.org/show_bug.cgi?id=343143）です。Mozillaは単に入力要素を「スクロール可能」と考えるのではなく、バグではないかもしれません。この意見に沿って、コンテンツが境界をオーバーフローすると、Firefoxのtextarea要素がscrollWidthプロパティを正しく設定しています。

現在、私の唯一の考えはどちらかにある： （a）の代わりにtextarea要素を使用し、各入力からkeyupイベントでは、単一のライン入力何とか または （B）に限定し、同様に内容をコピー形状のdiv要素とそのscrollWidthプロパティを見てください。

FFでこれを達成するには良い方法はありますか？

Answer 1

文字列の長さをピクセル単位で測定するとどうなりますか？入力の幅をそれと比較することができます。
jquery：Determine Pixel Length of String in Javascript/jQuery?で文字列のピクセル長を取得する方法は次のとおりです。
私のようなものだろう：

 
function inputExceeded(el){ 
    var s = $('<span >'+el.val()+'</span>'); 
    s.css({ 
     position : 'absolute', 
     left : -9999, 
     top : -9999, 
     // ensure that the span has same font properties as the element 
     'font-family' : el.css('font-family'), 
     'font-size' : el.css('font-size'), 
     'font-weight' : el.css('font-weight'), 
     'font-style' : el.css('font-style') 
    }); 
    $('body').append(s); 
    var result = s.width() > el.width(); 
    //remove the newly created span 
    s.remove(); 
    return result; 
} 

Answer 2

私は、これは古いっぽい質問ですけど、多分これが誰かを助けるを。入力されたテキストが入力の幅より広い場合、jQueryは 'スクロール'イベントを発生させます。残念ながら、JavaScriptを使用してテキストを入力に挿入すると、 'scroll'イベントは発生しません。また、この例では、ユーザーがテキストを縮小した場合、入力を縮小しません。

​​

編集： 私はちょうどカーソルが入力のエッジを超えたときに、スクロールイベントがのみトリガされていることに気づきました。