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?
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');
}
}
}
}
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.
sdfafadsfsdafsdf asdf asdf sda fsd afasdfjadsfklasdhfasdkfdgasf sdahdghfgdhg fhdhgfhdgfsdhg