Bir girişteki (type = text) öğedeki metnin FireFox'taki sınırları aşıp aşmadığını tespit edin.

Question

Bir girdinin (type = text) öğesinin içeriğinin (değeri) boyutunun üzerinde olup olmadığını algılamanın bir yolu var mı?

Internet Explorer'da, özelliği, bu doğru olduğunda style.width'dan büyük olacaktır. Ancak Firefox'ta, scrollWidth her zaman style.width'a eşittir ve bilinen bir hatadır (https://bugzilla.mozilla.org/show_bug.cgi?id=343143), belki de hata değildir, çünkü Mozilla basitçe bir giriş öğesinin "kaydırılabilir" olduğunu düşünmez, ancak yine de. Bu düşünceyle uyumlu olarak, Firefox'un textarea öğesi DOES, içerik sınırları aştığında scrollWidth özelliğini doğru şekilde ayarladı. (a) her nasılsa veya (b) girişin her keyUp olayda, benzer içeriğini kopyalamak yerine textarea elemanı kullanın ve tek satır girişine sınırlamak:

Şu anda, benim tek düşünce ya üzeresiniz şekilli div elemanı ve özelliğine bakın.

Bunu FF'de başarmanın daha iyi bir yolu var mı?

Answer 1

Dizenin uzunluğunu piksel olarak ölçüyorsanız ne olur? o zaman girdinin genişliğini onunla karşılaştırabilirsiniz.
Bir dizgenin piksel uzunluğunu jquery: Determine Pixel Length of String in Javascript/jQuery? ile nasıl edinebilirsiniz.
Ben böyle bir şey yapsın: Bu eski-imsi soru olduğunu biliyorum

 
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

, ama belki bu kimse yardımcı olacaktır. Girilen metin girişin genişliğinden daha genişse jQuery 'kaydırma' olayını tetikler. Ne yazık ki, metin girişine JavaScript ile enjekte edilirse 'kaydırma' olayı tetiklenmez. Ayrıca, kullanıcı metni indirdiğinde bu örnek girişi daralmaz.

$('input[type=text]').on('scroll.input-expander', function(event, element){ 
    $(this).css('width','100%'); 
    $(this).unbind('scroll.input-expander'); 
}); 

Düzenleme: Sadece imleç girişi kenarından öteye gittiğinde kaydırma olayı sadece tetiklenir fark etti.