Changing a textarea’s wrap attribute via the DOM

20061002271

The wrap attribute of a textarea defines how text within it wraps for the user and how those wraps get sent to the server. While not a part of the XHTML spec, it does function in most modern browsers. The default mode is soft – lines wrap when they are as wide as the box but those returns are not sent to the server on submit. Non-standard options include hard which is visually the same to the user but also sends the line returns to the server and off which results in no wrapping of text at all, rather, a horizantal scrollbar appears if lines get too wide. This might be useful for code inside a textarea though this can be better accomplished with CSS.

So say you have a CMS that generates a contact form that submits an email response. The most reasonable setting for the textarea in which the user is to enter their message is to not specify the attribute at all. With an open source CMS it is easy enough to hack the source code to fix a misplaced wrap="off" attribute but what about closed off, hosted applications?

Go DOM

The DOM comes in handy for changing little things to make a site render more pleasantly. In this case, because it can access any element on the page and said element’s attributes, it seems reasonable to quickly reset the wrap attribute to soft or completely remove it:

if (document.getElementsByTagName) {
  var textareas = document.getElementsByTagName('textarea');
  if (textareas.length > 0) {
    for(i=0;i<textareas.length;i++) {
      if (textareas[i].getAttribute('wrap') == "off") {
        textareas[i].removeAttribute('wrap');
      }
    }
  }
}

Great. For IE.

As mentioned, the wrap attribute for a long time was a non-standard property brought about by Netscape Navigator 4. Because of this it is not a part of the DOM specification. Though all browsers can access it, those properly applying the DOM don’t actually recognize it. This means changing the attribute on an existing textarea works only in IE – not Firefox or Safari. A way around this is to completely remove the faulty textarea and replace it with a new one sans the wrap attribute.

if(document.getElementsByTagName) {
  var textareas = document.getElementsByTagName('textarea');
  if (textareas.length > 0) {
    for(i=0;i>textareas.length;i++) {
      if (textareas[i].getAttribute('wrap') == "off") {
        textareas[i].removeAttribute('wrap');
        var usertext = textareas[i].value;
        var newtextarea = textareas[i].cloneNode(true);
        newtextarea.value = usertext;
        var theparent = textareas[i].parentNode
        var thesibling = textareas[i].nextSibling;
        theparent.removeChild(textareas[i]);
        theparent.insertBefore(newtextarea, thesibling);
      }
    }
  }
}

The above code gets all textarea elements on a page and checks if their wrap attribute is set to off. If so, the attribute is removed. The value of the textarea is stored in case the user already entered something in it (refreshing a page typically does not erase form contents but will cause the script to run again) and the element is cloned to retain any other attributes. Attach the value and we have a perfect copy minus the wrap. Using the parentNode and nextSibling properties of the DOM the exact location of the textarea can be found and the new one is inserted after removing the old.

And now anyone with javascript turned on can actually see what they type regardless of a poorly written line of CMS code. While this is a rather specific example, the same idea can probably be used to get around other standards issues. It is however very inefficient code that would much better be dealt with in the original source, granted you can get your hands on it.

Comments

1. Anonymous 20070411

   sdfafadsfsdafsdf asdf asdf sda fsd afasdfjadsfklasdhfasdkfdgasf sdahdghfgdhg fhdhgfhdgfsdhg

---

Search WayTooCrowded