How to Wrap Words

@sumitbApr 14.2005

Hi All,

I am having 4 text boxes.I want automatically go to the next text box once user entered 50 characters in one box also same time I want to wrap the word means if the word is not completed in one textbox(50 characters limit is reached) I want to take that word to next text box.

I will really appriciate if someone can help me out.

Thanks.

to post a comment

JavaScript

12 Comments(s) _↴

@sumitbauthorApr 18.2005 — #Any one ??

I will appriciate if somebody helps me out..

@A1ien51Apr 18.2005 — #http://www.javascriptkit.com/script/script2/autotab.shtml

@sumitbauthorApr 18.2005 — #Thanks for your response.I think you have not understood what I am trying to do.I hope I made more clear this time.

I am having 4 textboxes.

<TR>

<TD ><input type="text" maxlength="50"

size="70" name="comment" /></TD>

</TR>

<TR>

<TD><input type="text" maxlength="50"

size="70" name="t2" /></TD>

</TR>

<TR>

<TD><input type="text" maxlength="50"

size="70" name="t3" /></TD>

</TR>

<TR>

<TD><input type="text" maxlength="50"

size="70" name="t4" /></TD>

</TR> [/QUOTE]

Each text box is having max length of 50.What I want

is when Iam typing in one line

and the max.length reached i.e 50 char cursor

automatically go to the next textfield

with wrapping the uncompleted word in first text box

to next textbox.

For example:

Text Field 1 :"I am testing the script for you if it is perfect then you ha

Text Field 2 : ve to test this."

suppose the limit comes after"ha" the "have" should

wrap and come to the second line

like this

TextField 1: "I am testing the script for you if it is perfect then you

TextField 2: have to test this."

I am able to come automatically to the next line once

the size is reached

but not able to wrap the word.

I will appriciate the help

@Warren86Apr 18.2005 — #<HTML>

<Head>

<Script Language=JavaScript>

var nBreaks = 0;
 
  function flowTo(isField,isNext){ 
 
   if (isField.full == 0)
   {
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar == 50)
   {
   isField.full = 1;
   lastChar = currText.charAt(currText.length-1);
   if (lastChar == " "){isNext.focus();}
   else 	{
   wrapStr = currText.substring(currText.lastIndexOf(' '),currText.length)
   isField.value = currText.substring(0,currText.length-(wrapStr.length-1))
   isNext.focus();
   isNext.value = wrapStr;
   }
   }
   }
   else {isField.value = isField.value.substring(isField.value[0],isField.value.length-1)}
 
  }
 
  function limitChar(isField){
 
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar > 50)
   {
   isField.value = isField.value.replace(/rn$/,"");
   isField.value = isField.value.substring(0,isField.value.length-1);
   }
  }

</Script>

</Head>

<Body>

<Form name='Form1'>

<textarea rows='3' cols='30' name='area1' full=0 onkeyup="flowTo(this,this.form.area2)"></textarea><br>

<textarea rows='3' cols='30' name='area2' full=0 onkeyup="flowTo(this,this.form.area3)"></textarea><br>

<textarea rows='3' cols='30' name='area3' full=0 onkeyup="flowTo(this,this.form.area4)"></textarea><br>

<textarea rows='3' cols='30' name='area4' onkeyup="limitChar(this)"></textarea><br>

</Form>

</Body>

</HTML>

@Warren86Apr 18.2005 — #Minor correction to prevent editing of previous text area...

<HTML>

<Head>

<Script Language=JavaScript>

var nBreaks = 0;
  var prevText = "";
 
  function flowTo(isField,isNext){ 
 
   if (isField.full == 0)
   {
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar == 50)
   {
   isField.full = 1;
   lastChar = currText.charAt(currText.length-1);
   if (lastChar == " "){isNext.focus()}
   else 	{
   wrapStr = currText.substring(currText.lastIndexOf(' '),currText.length)
   isField.value = currText.substring(0,currText.length-(wrapStr.length-1))
   isNext.focus();
   isNext.value = wrapStr;
   }
   if (prevText == ""){prevText = isField.value}
   }
   }
   else 	{
   if (event.keyCode == 8 || event.keyCode == 13)
   {
   isField.value = prevText;
   }
   else 	{
   isField.value = isField.value.substring(isField.value[0],isField.value.length-1)
   }
   }
  }
 
  function limitChar(isField){
 
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar > 50)
   {
   isField.value = isField.value.replace(/rn$/,"");
   isField.value = isField.value.substring(0,isField.value.length-1);
   }
  }

@sumitbauthorApr 18.2005 — #Thanks a lot.I am almost there with your help but facing one

problem.

case 1:

If I am typing in the boxes without stopping then it is fine.

But if I stopped after typing few words and wanted to go back to the previously

typed words to make corrections,I am not able to take cursor back it jumps back

to the end of the line.

case 2:

If I continously type in textbox 1 and then in textbox 2.Now if I delete

the text in both of the textboxes using backspace,then I am not able to

type again in textbox 1.

I will appriciate your help.

Thanks.

@Warren86Apr 18.2005 — #Correcting an error in the previous post...

<HTML>

<Head>

<Script Language=JavaScript>

var nBreaks = 0;
  var prevText = "";
 
  function flowTo(isField,isNext){ 
 
   if (isField.full == 0)
   {
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar == 50)
   {
   isField.full = 1;
   lastChar = currText.charAt(currText.length-1);
   if (lastChar == " "){isNext.focus()}
   else 	{
   wrapStr = currText.substring(currText.lastIndexOf(' '),currText.length)
   isField.value = currText.substring(0,currText.length-(wrapStr.length-1))
   isNext.focus();
   isNext.value = wrapStr;
   }
   prevText = isField.value;
   }
   }
   else 	{
   if (event.keyCode == 8 || event.keyCode == 13)
   {
   isField.value = prevText;
   }
   else 	{
   isField.value = isField.value.substring(isField.value[0],isField.value.length-1)
   }
   }
  }
 
  function limitChar(isField){
 
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar > 50)
   {
   isField.value = isField.value.replace(/rn$/,"");
   isField.value = isField.value.substring(0,isField.value.length-1);
   }
  }

@Warren86Apr 18.2005 — #I have nothing further.

You know, if the code doesn't work EXACTLY as your heart desires, I don't care. It's your project and your responsibility.

I've provided a comprehesive EXAMPLE. Deal with it.

@sumitbauthorApr 18.2005 — #Thanks for your time and help.

@Warren86Apr 18.2005 — #Final version. None of the previous fields can be edited...

<HTML>

<Head>

<Script Language=JavaScript>

var nBreaks = 0;
  var prevText = "";
 
  function flowTo(isField,isNext){ 
 
   if (isField.full == 0)
   {
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar == 50)
   {
   isField.full = 1;
   lastChar = currText.charAt(currText.length-1);
   if (lastChar == " "){isNext.focus()}
   else 	{
   wrapStr = currText.substring(currText.lastIndexOf(' '),currText.length)
   isField.value = currText.substring(0,currText.length-(wrapStr.length-1))
   isNext.focus();
   isNext.value = wrapStr;
   }
   prevText = isField.value;
   }
   }
   else 	{
   if (event.keyCode == 8 || event.keyCode == 13)
   {
   isField.value = prevText;
   }
   else 	{
   isField.value = isField.value.substring(isField.value[0],isField.value.length-1)
   }
   }
  }
 
  function limitChar(isField){
 
   currText = isField.value.replace(/^ /,"")
   isField.value = currText;
   if (currText.match(/rn/g)){nBreaks = currText.match(/rn/g).length}
   nChar = currText.length-nBreaks;
   if (nChar > 50)
   {
   isField.value = isField.value.replace(/rn$/,"");
   isField.value = isField.value.substring(0,isField.value.length-1);
   }
  }

</Script>

</Head>

<Body>

<Form name='Form1'>

<textarea rows='3' cols='30' name='area1' full=0 onkeyup="flowTo(this,this.form.area2)" onclick="prevText=this.value"></textarea><br>

<textarea rows='3' cols='30' name='area2' full=0 onkeyup="flowTo(this,this.form.area3)" onclick="prevText=this.value"></textarea><br>

<textarea rows='3' cols='30' name='area3' full=0 onkeyup="flowTo(this,this.form.area4)" onclick="prevText=this.value"></textarea><br>

<textarea rows='3' cols='30' name='area4' onkeyup="limitChar(this)"></textarea><br>

</Form>

</Body>

</HTML>

@sumitbauthorApr 19.2005 — #I do'nt want to prevent editing in previously typed boxes.User can delete or change the text he typed previously.

By this script once the text is deleted from the text areas.I am not able to write again.As long as key is pressed it is fine but as the key is released I can'nt type anything.

Thanks

@jordonjJul 25.2008 — #does this work for anyone else? not going to the next field for me....

Also in #JavaScript _↴

google API Javascript Settimeout Help Protection of javascript

Success!

Help @sumitb spread the word by sharing this article on Twitter...

Tweet This

How to Wrap Words

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to Wrap Words

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴