Solved

Javascript (or CSS) textarea word wrap Firefox

Posted on 2009-07-16
3
1,067 Views
Last Modified: 2012-08-13
I couldn't find a clear solution on this, but it seems like it would have a quick, easy answer by now.  I have a textarea field for notes.  It looks like this:

<textarea name=inspnotes cols=21 rows=13></textarea>

In firefox, the warp property is not recognized, so I need an alternative method of wrapping a user's text when they reach 21 columns.  
I found the attached javascript, and it works fine for the first line of text, but I do not understand the part of the script that uses the modulus operator, so the subsequent lines of text do not wrap properly. If there is a better way to do this other than javascript(maybe CSS), please let me know.  Thanks for reading.
<script language="javascript" type="text/javascript">

var ijk = 0;

function txt_ara()

{

//alert("1");

//alert(document.getElementById("email").value.length);

//var ijk = 0;

//var incr = 2;

if(document.getElementById("email").value.length <= 21)

{

if(document.getElementById("email").value.length == 21)

{

document.getElementById("email").value += "\n";

}

}

else

{

var lkm = "";

if(ijk == 0)

{

lkm = parseInt(document.getElementById("email").value.length % 120);  //This is what I don't understand.  What value should I set this to?

}

else

{

lkm = parseInt(document.getElementById("email").value.length % 60);  //This is what I don't understand.  What value should I set this to?

}

if(lkm == 0)

{

ijk = 1;

document.getElementById("email").value += "\n";

}

}

}

</script> 
 

<textarea name=inspnotes cols=21 rows=13 id=email onkeyup="txt_ara();" onkeydown="txt_ara();"></textarea>

Open in new window

0
Comment
Question by:thedeal56
  • 2
3 Comments
 
LVL 11

Accepted Solution

by:
level9wizard earned 500 total points
Comment Utility
Why not do something like this:

<!-- HTML -->
<textarea class="email"></textarea>

/* CSS */
.email
{
    display: block;
    width: 200px; /* set this to whatever you need */
}
0
 

Author Comment

by:thedeal56
Comment Utility
Thanks for the fast reply.  BTW, your name is awesome.

Here's what I did:

.email
{
    display: block;
    width: 200px;
}

<textarea name=inspnotes cols=21 rows=13 class=email></textarea>


Still no word wrap.  
0
 

Author Comment

by:thedeal56
Comment Utility
I started thinking about this question, and I realized that I might not have been specific enough about my problem.  The error that I'm having is when a user is inputting text the words do not wrap to the box's width.  I thought I might should clear that up, because it might have sounded like I was having trouble displaying the text rather than trouble entering it in.  
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now