Member Avatar for OS_dev

I would like to be able to change the "wrap" attribute for a textarea with javascript. That is unless you can provide a cross browser solution in css2, giving me the ability to just modify the css attributes.

Thank you in advance.

  • 2 Contributors
  • 3 Replies
  • 280 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by OS_dev

Dani AI

Generated

Short answer: was right that older HTML4 didn't standardize a textarea wrap attribute, but modern HTML (HTML5 / the living standard) defines a wrap attribute and a DOM wrap property you can change from script. (html.spec.whatwg.org)

What the values mean: soft is the default (no extra line breaks added on submit), hard tells the UA to insert CR+LF so lines are wrapped on submit, and off is a historically implemented, non-standard behavior that changes rendering to act like white-space: pre. Note that hard only has effect when cols is set. Use these semantics when you care about what gets submitted vs what the user sees. (developer.mozilla.org)

If you want to toggle behavior without jQuery, use the DOM wrap property for submission behavior, and use a CSS class for visual wrapping. Example (vanilla JS + CSS):

/* toggle submission behavior */
const ta = document.getElementById('myTextarea');
ta.wrap = 'hard'; // or 'soft'
/* visual: disable wrapping and show horizontal scroll */
.nowrap {
  white-space: pre;
  overflow-x: auto;
}
/* toggle the visual class */
ta.classList.toggle('nowrap', disableWrap);

The DOM wrap property reflects the element attribute and is supported in modern browsers; use it when you need the form-value to change. Use the white-space CSS property when you only need to change rendering (visual wrapping and scrollbars). (developer.mozilla.org)

If supporting very old browsers that lack the wrap API, either transform the textarea value on submit (insert CR+LF at the desired column width server- or client-side) or rely on the CSS approach for consistent visual behavior. Avoid relying on wrap="off" for portability — treat it as non-standard. (developer.mozilla.org)

Member Avatar for OS_dev

never mind, I got it. Here is my solution using jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.wordWrap.js"></script>
<script type="text/javascript" language="javascript">
function toggleWrap(checkbox, elementID)
{
    if(checkbox.checked == true)
    {
        $("#" + elementID).wordWrap("on");
    }
    else
    {
        $("#" + elementID).wordWrap("off");
    }
}
</script>
Edited by OS_dev because: n/a
Member Avatar for rajendra.parmar

I would like to be able to change the "wrap" attribute for a textarea with javascript. That is unless you can provide a cross browser solution in css2, giving me the ability to just modify the css attributes.

Thank you in advance.

set the attribute

wrap="hard"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.