Word wrap a textarea at x number of characters
Hello,
I am currently seeking help on how to best approach finding a solution to this.
Essentially I have a textarea which a user is supposed to be typing a text based email message(no HTML) The textarea has a column width of 80
However there is a recommended width of 53 characters per line. Obviously the user can just keep on typing away past the 53 character recommended width if they want, but I want to add either a form button or a link with an onClick that analyzes the contents of the textarea. It should insert a hard return when it reaches 53 characters, but if the 53rd character is in the middle of a word it should count back to the previous space and do the line wrap there.
Can anyone point me in the right direction? I assumed there has to a solution using jQuery, but I am at a loss. I did come across some javascript which works, but it doesn't take into account the fact that the 53rd character maybe in the middle of a word.
- <head>
- <title>Textarea Test</title>
- <script type="text/javascript">
- <!-- Begin
- function showLines(max, text) {
- max--;
- text = "" + text;
- var temp = "";
- temp = temp.replace(/^(.{53}\w+)/mg,"$1\n");
- var chcount = 0;
- for (var i = 0; i < text.length; i++) // for each character ...
- {
- var ch = text.substring(i, i+1); // first character
- var ch2 = text.substring(i+1, i+2); // next character
- if (ch == '\n') // if character is a hard return
- {
- temp += ch;
- chcount = 1;
- }
- else
- {
- if (chcount == max) // line has max chacters on this line
- {
- temp += '\n' + ch; // go to next line
- chcount = 1; // reset chcount
- }
- else // Not a newline or max characters ...
- {
- temp += ch;
- chcount++; // so add 1 to chcount
- }
- }
- }
- return (temp); // sends value of temp back
- }
- // End -->
- </script>
- </head>
- <body>
- <p align="center">
- <form name=form1>
- <textarea name=text1 rows=15 cols=80>This is just an example of a long textbox entry that just went on and on and on and on..... The visitor did not hit <enter> when entering this information so it continued off the right side of the textarea box. Notice that hitting <enter> after each line, like this:
- This is on another line
- And so is this one.....
- Still wraps correctly. Neat!</textarea><br>
- <input type=button value="Wrap Lines to 53 Spaces"
- onClick="this.form.text1.value = showLines(53, this.form.text1.value)">
- </form>
- </p>
- </body>
- </html>
Thanks for any assistance you can provide.
Chad