Ändern des Textarea-Umbruchs mit Javascript

Question

Für meine kleine Wiki-Anwendung benötige ich in den meisten Fällen einen weichen (oder virtuellen) Umbruch für die Textarea, die zum Bearbeiten des Inhalts verwendet wird. In einigen Fällen wäre es jedoch besser, den Inhalt nicht umzubrechen. Ich dachte, ich könnte dies durch eine einfache Schaltfläche zum Ausschalten des Umbruchs erreichen. Hier ist der vereinfachte Code:

  <form name="wikiedit" action="[[script_name]]" method="post">
    <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
    <input type="button" onclick="document.wikiedit.content.wrap='off';" value="No Wrap"> &nbsp;
    <input type="submit" value="Save">
  </form>

Es funktioniert mit IE, aber nicht mit Firefox oder Opera. Wie soll ich das machen?

Answer 1

Siehe Fehler 41464: https://bugzilla.mozilla.org/show_bug.cgi?id=41464

Nasty Workaround für jetzt ist es, die Textarea mit einem Klon von sich selbst zu ersetzen:

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap= wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute('wrap', wrap);
        var newarea= area.cloneNode(true);
        newarea.value= area.value;
        area.parentNode.replaceChild(newarea, area);
    }
}

Unabhängig davon: Versuchen Sie zu vermeiden, auf Elemente direkt aus dem Dokumentobjekt zuzugreifen, da dies bei einigen Browsern unzuverlässig ist und Probleme mit Namenskonflikten verursacht. 'document.forms.wikiedit' ist besser, und der Wechsel zu 'id' auf dem Formular anstelle von 'name' und die Verwendung von 'document.getElementById('wikiedit')' ist noch besser.

form.elements.content ist auch zuverlässiger als form.content aus ähnlichen Gründen... oder, in der Tat, Sie könnten der Textarea eine ID geben und direkt zur Textarea mit getElementById gehen, ohne sich die Mühe zu machen, das Formular anzusehen.

Answer 2

Hier finden Sie eine Anleitung zum Umbruch von Textareas, einschließlich einer CSS-Lösung:

http://www.web-wise-wizard.com/html-tutorials/html-form-forms-textarea-wrap.html

Die von ihnen angeführte CSS-Lösung lautet:

white-space: pre; overflow: auto;

Die da wären:

<script type="text/javascript">
function setNoWrap(textarea) {
    textarea.style.whiteSpace = 'pre';
    textarea.style.overflow = 'auto';
}
</script>
<form name="wikiedit" action="[[script_name]]" method="post">
 <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
 <input type="button" onclick="setNoWrap(this);" value="No Wrap">  
 <input type="submit" value="Save">
</form>

Answer 3

Nach Angaben von die HTML 4.01-Spezifikation , wrap ist kein gültiges Attribut für <textarea> s, was erklären würde, warum es so schwierig und seltsam ist. Es sieht so aus, als ob Firefox tatsächlich die wrap Attribut, aber Sie können es nicht ändern.

Aber ich habe eine Lösung! Sie ist ziemlich schrecklich, aber hier ist sie. Ersetzen Sie die Textarea vollständig durch eine neue.

// this is the onclick handler for your button
document.getElementById("nowrapButton").onclick = function() {
  var oldOne = this.form.content;  // the old textarea
  var newOne = document.createElement('textarea'); // the new textarea
  var attrs = ['name', 'rows', 'cols']; // these are the attributes to keep
  for (var i = 0; i < attrs.length; ++i) {
    // copy the attributes to the new one
    newOne.setAttribute(attrs[i], oldOne.getAttribute(attrs[i]));
  }

  // toggle the wrapping on and off
  if (oldOne.getAttribute('wrap') != 'off') {
    newOne.setAttribute('wrap', 'off');
  }

  // copy the text over
  newOne.value = oldOne.value;

  // add the new one
  oldOne.parentNode.insertBefore(newOne, oldOne);
  // get rid of the old one
  oldOne.parentNode.removeChild(oldOne);
  return false;
};

Hier ist eine funktionierende Version davon, mit der Sie spielen können: http://jsbin.com/ugepa

Wie üblich wäre das in jQuery viel schöner :)

Answer 4

Dies ist zwar ein alter Beitrag, aber da ich hierdurch Hilfe bekomme, möchte ich auch eine einfachere Methode zeigen, die ich gerade gefunden habe. Und ich denke, es ist mehr richtig.

Um .cloneNode() zu ersetzen, denke ich, dass die beste Methode ist:

child.setAttribute( 'wrap', wrap ); parent.removeChild( child ); parent.appendChild( child );

Auf diese Weise können Sie nicht nur die Attribute selbst speichern, sondern auch die von Ihnen hinzugefügten Attribute, z. B. ein Skript-Handle oder etwas anderes.

Answer 5

Probieren Sie diese jQuery-Erweiterung aus: Textarea-Umbruchwechsler .