[Javascript] Realtime wrap van textarea aanpassen

[Reveller]

Ik gebruik een textarea als "editor" binnen mijn website. Soms vind ik het makkelijker om een wordwrap te hebben, soms ook niet (bv. als ik tabellen intik -- heb dan liever de hele tag op een regel zonder dat die afgebroken wordt).

Ik probeer daarom een functie te bouwen waarmee ik de wrap van die textarea kan aanpassen, zodat ik (net als bij Microsoft Notepad / Kladblok) kan switchen tussen wel / geen "wordwrap". Ik heb nu dit:

code:

[img]"images/wordwrap.gif"[/img]<br>
<textarea id="editor" wrap="off">Content</textarea>

function wordWrap() {
  txtarea = document.getElementById('editor');
  var wrap = txtarea.getAttribute('wrap');
  if (wrap.toLowerCase() == 'off') {
    txtarea.setAttribute('wrap', 'hard');
  }
}

Dit werkt alleen niet. Ik krijg geen error (ik gebruik FF en IE), maar er gebeurt ook niets. Opzich moet de code wel kloppen. als ik onder regel 6 "alert(wrap)" toevoeg, alert hij keurig "off". Wat doe ik verkeerd?

[Koeniepoenie]

Het is idd wel vreemd. Wat ook raar is, is dat FF dit niet goed doet (FF: undefined, IE: correct)

code:

alert(txtarea.wrap);

Als je de nieuwe waarde zo set:

code:

txtarea.wrap = 'hard';

werkt het in IE wel, maar FF niet..

Het is waarschijnlijk een bug in FF: Bug 41464

[Reveller]

Bedankt voor je reaktie, Koeniepoenie. Ik heb je link naar bugzilla gevolgd en heb de comments op die bug gelezen. Onderaan staat:

*** Bug 302710 has been marked as a duplicate of this bug. ***

Tussen de comments op die bug stond het volgende:

The following inefficient code can workaround this bug:

code:

textarea.setAttribute("wrap", "off");
var parNod = textarea.parentNode, nxtSib = textarea.nextSibling;
parNod.removeChild(textarea); parNod.insertBefore(textarea, nxtSib);

Dus dat ga ik dan later maar eens proberen dan! Overigens wel ontzettend stom dat zo'n bug al sinds juni 2000 bekend is en nog niet opgelost is

[Spleasure]

Sja, Mozilla lijkt Microsoft wel

[crisp]

Mwa, wrap is sowieso propriety en geen officieel attribuut van textarea in HTML 4...

[Koeniepoenie]

Reveller schreef op zondag 23 oktober 2005 @ 18:15:
Bedankt voor je reaktie, Koeniepoenie. Ik heb je link naar bugzilla gevolgd en heb de comments op die bug gelezen. Onderaan staat:

[...]

Tussen de comments op die bug stond het volgende:

[...]

Dus dat ga ik dan later maar eens proberen dan! Overigens wel ontzettend stom dat zo'n bug al sinds juni 2000 bekend is en nog niet opgelost is

Wel een erg ranzige oplossing zeg. Eerst de node verwijderen, en dan meteen weer erin gooien..

en @crisp: Dat het niet toebehoort aan de html 4 specs is natuurlijk geen reden om het zo half te implementeren (doe dan helemaal niet).

[crisp]

Koeniepoenie schreef op zondag 23 oktober 2005 @ 19:02:
[...]
en @crisp: Dat het niet toebehoort aan de html 4 specs is natuurlijk geen reden om het zo half te implementeren (doe dan helemaal niet).

Maar ik kan me wel voorstellen dat het fixen daarvan daardoor een erg lage prioriteit heeft

[Reveller]

Koeniepoenie schreef op zondag 23 oktober 2005 @ 19:02:
[...]
Wel een erg ranzige oplossing zeg.
[...]

Natuurlijk, maar er is geen andere oplossing als je dit cross-browser wilt oplossen. Ik heb daar overigens wel een probleem mee:

code:

[img]"images/wordwrap.gif"[/img]<br>
<textarea id="editor" wrap="off">Content</textarea>

function wordWrap() {
  var txtarea = document.getElementById('editor');
  wrap = txtarea.getAttribute('wrap');

  if (wrap.toLowerCase() == 'off') {
    txtarea.setAttribute('wrap', 'soft');
    txtarea.setAttribute('id', 'editor');
    var parNod = txtarea.parentNode, nxtSib = txtarea.nextSibling;
    parNod.removeChild(txtarea); parNod.insertBefore(txtarea, nxtSib);
  }
  else {
    txtarea.setAttribute('wrap', 'off');
    txtarea.setAttribute('id', 'editor');
    var parNod = txtarea.parentNode, nxtSib = txtarea.nextSibling;
    parNod.removeChild(txtarea); parNod.insertBefore(txtarea, nxtSib);
  }
}

Als ik deze pagina laad en op wordwrap.gif klik, springt de textarea wrap idd van off naar soft. Maar als ik dan weer klik, krijg ik een error in plaats van dat de wrap van soft terug naar off springt:

code:

Error: wrap has no properties
Source File: http://192.168.0.2/cms/system/js/editor.js
Line: 147 (is hier regel 8)

Voor zover ik weet, wordt "wrap" toch in regel 6 gedefinieerd? En ik zet toch het attribuut id opnieuw als ik de node verwijder en terug zet? Oh - en in IE werkt deze functie helemaal niet

[ Voor 19% gewijzigd door Reveller op 23-10-2005 19:55 ]

[Reveller]

Bescheiden * kick *

[Reveller]

Ik probeer het nu over een andere boeg:

code:

<script type="text/javascript">
function wordWrap() {
  var txtarea = document.getElementById('editor');
  var wrap = txtarea.getAttribute('wrap');

  (wrap.toLowerCase() == 'off')?
  txtarea.setAttribute('wrap', 'soft'):
  txtarea.setAttribute('wrap', 'off');

  txtarea.style.display = 'none';
  txtarea.style.display = '';
}
</script>

<input type="button" value="Wrap!" onclick="wordWrap();"><br>
<textarea id="editor" cols="20" rows="5" wrap="off">
Blablabla blablablablablablablablablabla blablabla bla
</textarea>

Ook dit werkt alleen in IE en niet in Opera en FireFox. Opera en FF genereren ook geen errors. Er gebeurt gewoon helemaal niets. Heeft iemand misschien nog een ander idee?

[ Voor 23% gewijzigd door Reveller op 25-10-2005 17:08 ]

[crisp]

Dit lijkt hier goed te werken in Firefox:

JavaScript:

function wordWrap()
{
    var txtarea = document.getElementById('editor');
    var wrap = txtarea.getAttribute('wrap').toLowerCase();

    txtarea.setAttribute('wrap', wrap == 'off' ? 'soft' : 'off');
    var parNod = txtarea.parentNode, nxtSib = txtarea.nextSibling;
    parNod.removeChild(txtarea); parNod.insertBefore(txtarea, nxtSib);
}

[Reveller]

Bij mij nu ook. Ik had FF 1.5 beta geinstalleerd; daarin werkte het niet. Dus maar terug gegaan naar 1.06. Het werkt overigens ook in Opera en Netscape 8.0. Dank je!