[jQuery][IE8] $(this).scrollTop() werkt niet goed

[Booster]

Ik heb het volgende scriptje:

code:

  $('#messageboxtextarea').scroll(function () {
      while ($(this).scrollTop() > 0) {
          lines=$(this).val().slice(0, -1);
          $(this).val(lines);
      }
  });

Functie: als iemand meer tekst invoert dan zichtbaar in de textarea, dan verwijder ik 1 voor 1 letters van de ingevoerde tekst, tot de tekst weer binnen de textarea valt. scrollTop() meet het aantal pixels dat is gescrolled. Door na het weghalen van iedere letter te meten of er nogsteeds gescrolled is, kunnen we zien of alle tekst alweer binnen het kader van de textarea valt.

Dit werkt goed in Firefox, Chrome, IE9, maar niet in IE8. Deze hangt zichzelf op tot je het script stopt. Bij een stop, is de textarea plotseling leeg.

Debug:
Als ik de waarde van $(this).scrollTop() check in IE8, zie ik dat die niet afneemt als er een regel tekst uit de textarea verdwijnt. Dus:
- ik copy paste een stuk tekst dat groter is dan de textarea in het veld.
- De while kicked in omdat $(this).scrollTop() groter is geworden dan 0, laten we zeggen 40.
- Het verwijderen van letters werkt vervolgens, maar $(this).scrollTop() blijft 40.

IE blijft dus oneindig pogingen doen om characters weghalen. Hence het bevriezen van IE, en het lege veld als het script is gestopt.

How come? Is hier een workaround voor?
Ik ben momenteel niet zo geinteresseerd in totaal andere oplossingen, maar vooral in het werkend maken van specifiek deze oplossing.

Trouwens diep triest, dat IE9 nogsteeds de hele browserinterface laat blokkeren bij een js alert() in een endless loop.

[R4gnax]

Probeer het eens via scrollHeight en clientHeight.
Zo ongeveer:

JavaScript:

$( "#messageboxtextarea" ).on( "scroll", function( event ) {

  while ( Math.abs( el.prop( "scrollHeight" ) - el.prop( "clientHeight" )) > 1 ) {
    el.val( el.val().slice( 0, -1 ));    
  }  

});

Vraag me trouwens af waarom je dit in hemelsnaam wilt doen...

[_Thanatos_]

Ik denk voor een soort logging-functionaliteit... Maar dan kun je beter het aantal regels van een textarea vastzetten (met het rows-attribuut, of in css met n keer de line-height) en dan steeds controleren hoeveel regels tekst er ingevoerd zijn.

[Booster]

R4gnax schreef op vrijdag 09 maart 2012 @ 09:04:
Probeer het eens via scrollHeight en clientHeight.
Zo ongeveer:

JavaScript:

[...]

Je oplossing werkt goed in Firefox en Chrome, maar helaas maakt het het probleem bij IE groter: IE9, 8 en 7 maken het tekstveld leeg met deze functie. Hetzelfde probleem dus als met mijn scriptje.
Jouw oplossing: http://woei.mindcontrolle...limiter/textarea_alt.html
Mijn oplossing: http://woei.mindcontrolled.nl/got/textlimiter/textarea.html

In een ander forum kreeg ik deze tip:

[...] vrijwel zeker een repaint issue; gebruik een setTimeout(..,0) (0!) zodat je de browser de tijd geeft voor een repaint.

Dit heb ik gedaan, maar dat zorgt in IE alleen maar voor vreemd behaviour eigenlijk.
http://woei.mindcontrolle.../textarea_setTimeout.html

[R4gnax]

Booster schreef op zondag 11 maart 2012 @ 17:16:
[...]

Je oplossing werkt goed in Firefox en Chrome, maar helaas maakt het het probleem bij IE groter

http://jsfiddle.net/BqNpr/4/

Werkt tenminste in Firefox, IE9 en IE9-as-IE7.

Je mag zelf proberen om dit nog aan het scroll event te koppelen ipv het keyup event, maar mijn vermoeden is dat het gedrag daar pas fout gaat ...

[ Voor 20% gewijzigd door R4gnax op 11-03-2012 19:16 ]

[Booster]

Dank je - dit stukje lijkt het inderdaad goed te doen

Volgensmij zijn er geen inhoudelijke grote verschillen, behalve het scroll vs. keyup - ik zal je oplossing morgen verder testen en bestuderen Is het in orde als ik bij gebruik ook je naam vermeld in de comments? Dan vind ik wel zo netjes.

Ik zat te denken; wellicht dat het overflow stuk ook nog een belangrijke rol speelt in de werking, maar hoe dan ook is het vreemd dat het eerder goed werkte in Firefox en Chrome, maar niet in IE. Ben benieuwd of ik nog tot een specifiek probleempunt kom later.

[R4gnax]

Booster schreef op zondag 11 maart 2012 @ 22:48:
Dank je - dit stukje lijkt het inderdaad goed te doen

Volgensmij zijn er geen inhoudelijke grote verschillen, behalve het scroll vs. keyup - ik zal je oplossing morgen verder testen en bestuderen Is het in orde als ik bij gebruik ook je naam vermeld in de comments? Dan vind ik wel zo netjes.

Ik zat te denken; wellicht dat het overflow stuk ook nog een belangrijke rol speelt in de werking, maar hoe dan ook is het vreemd dat het eerder goed werkte in Firefox en Chrome, maar niet in IE. Ben benieuwd of ik nog tot een specifiek probleempunt kom later.

Bronvermelding maakt mij niet zo veel uit. (Tenminste; niet voor dit soort snippits.) Neemt niet weg dat het wel altijd fijn is wanneer mensen de moeite ervoor willen nemen.

Het overflow stukje kan inderdaad ook nog invloed hebben. Kom je maar op één manier achter: testen.
In elk geval succes ermee.