Changing textarea wrap with javascript

Question

For my small wiki, what I need most is to have a text box used to edit content to use soft (or virtual) packaging. However, in some cases, it will be preferable not to package the contents. I thought I would do it just by clicking a button to turn off packaging. Here is the simplified 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>

It works with IE, but not with Firefox or Opera. How should I do it?

Answer 1

See error 41464: https://bugzilla.mozilla.org/show_bug.cgi?id=41464

Currently, an unpleasant workaround is to replace the text box with a clone of itself:

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);
    }
}

: , . 'Document.forms.wikiedit , ' id , document.getElementById('wikiedit') .

form.elements.content , form.content ... , , textarea ID getElementById, .

Answer 2

textarea, CSS:

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

CSS, :

white-space: pre; overflow: auto;

:

<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

HTML 4.01, wrap <textarea>, , . , Firefox wrap, .

, ! , . textarea .

// 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;
};

, : http://jsbin.com/ugepa

, jQuery .:)

Answer 4

, , , . .

.cloneNode(), , :

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

, , , , script - .

Answer 5

jQuery: Textarea Wrap Changer.

Answer 6

bobince answer, :

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap = wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute("wrap", wrap);
        area.style.overflow = "hidden";
        area.style.overflow = "auto";
    }
}

VK , bobince, , setTimeout.