Solved

Wrapping single words in textarea

Posted on 2006-11-28
26
526 Views
Last Modified: 2008-02-01
Hi guys,

someone asked here about making textarea in FF wrap text like IE does it. For example, if I enter smth like this asdasdasdasdasdasdasdas in FF textarea will just scroll to the right whereas IE wraps the text once it reaches the end of the line. So, I'm writing a script that will simulate IE textarea behavior in FF.

Here it is:

<html>
      <head>
            <script language="JavaScript">
                  var limit = 7; // set to whatever you want the limit to be            
                  var main = "";
                  var count = 0;
                  var check = 0;
                  function wrapIt(obj) {
                        main = obj.value;
                        count = main.length;
                        count -= check;
                        if(count == limit) {
                              obj.value = main + "\n";
                              check += (limit + 1);
                        }
                  }
            </script>
      </head>
      <body>
            <textarea cols="10" rows="2" onKeyDown="wrapIt(this)"></textarea>
      </body>
</html>

It does work and allows only 7 symbols on each line. But if I delete text after entering it, it scrolls to the right again. Any suggestions on how to improve?
0
Comment
Question by:RealSnaD
  • 10
  • 5
  • 3
  • +5
26 Comments
 
LVL 6

Expert Comment

by:sodalitas
ID: 18030109
I don't have firefox on this machine, but the wrap="virtual" property on the textarea doesn't do the trick?
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18030116
nope, it doesn't
0
 
LVL 7

Expert Comment

by:mark-b
ID: 18030194
How about this?:

<html>
     <body>
          <textarea cols="10" rows="2" style="word-wrap:break-word;"></textarea>
     </body>
</html>

-Mark
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18030248
No, it doesn't work. I've tried many other things already. It wraps normal sentences, no problem. But it doesn't wrap smth like sssssssssssssssssssssssssssssssssss
0
 
LVL 7

Expert Comment

by:mark-b
ID: 18030250
Bah.  Forget it.  I read your question wrong.  :(
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18030907
Hi,

try this below example...use wrap=physical;

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
</HEAD>

<BODY>
<center>
<form name=myform action="YOUR-SCRIPT.CGI">
<font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 125 characters. )<br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="textCounter(this.form.message,this.form.remLen,125);" onKeyUp="textCounter(this.form.message,this.form.remLen,125);"></textarea>
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>
</form>
</center>

R.K
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18031141
rama_krishna580, thanks, but it's not what I want. Look at this picture. I don't think you guys understand what I'm trying to achieve here.

http://i59.photobucket.com/albums/g283/RealSnaD/untitled.jpg

I don't want it to scroll to the right.
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18031217
Hi,

>>>> I don't want it to scroll to the right.

The above example when u try is it scrolling to right..? it will not it wraps automatically.. try it and let me know..

R.K
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18031294
I did try it. That's a snapshot of that example. It doesn't wrap. Try it yourself. Load the page, and hold "a" for 5 seconds in textarea. See what happens.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18031548
People: It is the counter that does not update when backspace or delete is hit.
I would consider using setInterval onFocus and clearInterval onBlur to run the counter while the user is in the field

Michel
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18031987
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18032182
They all scroll to the right.
0
 
LVL 5

Expert Comment

by:dasmaer
ID: 18033293
About counters too... when you eventually work out that you need to count how many chars per col and then insert \n, IE counts \n as 1 char and FF as 2... when you get to that stage that is.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 17

Expert Comment

by:gops1
ID: 18033436
Use both onKeyPress and onKeyDown. I tried and it works:

<html>
      <head>
            <title>Script Demo Gops</title>
            <head>
                  <script type="text/javascript">
                        var limit = 7; // set to whatever you want the limit to be
                        var main = "";
                        var count = 0;
                        var check = 0;
                        function wrapIt(obj) {
                              main = obj.value;
                              count = main.length;
                              count -= check;
                              if(count == limit) {
                                    obj.value = main + "\n";
                                    check += (limit + 1);
                              }
                        }
                  </script>
            </head>
<body>
      <textarea cols="10" rows="2" onKeyPress="wrapIt(this)"  onKeyDown="wrapIt(this)"></textarea>
</body>
</html>
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18034015
I know it works, but if you type in something and then delete everything or part of it, it doesn't wrap anymore. The count variable doesn't get updated or gets updated wrong. I don't know yet.
0
 
LVL 6

Expert Comment

by:system_down
ID: 18035183

<html>
     <head>
          <title>demo</title>
          <head>
               <script type="text/javascript">
                 
                              function upCounter(obj){
                                    var input = document.getElementById('counter');
                                    var str = obj.value;
                        var count = str.length;
                                    //alert(count);
                                    input.value = count;
                              }
                              
               </script>
                     <style type="text/css" media="screen">
                           textarea{overflow-x:hidden; overflow-y:auto;}
                    
                        </style>
          </head>
<body>
     <textarea onkeyup="upCounter(this)"  onKeyPress="upCounter(this);"  onKeyDown="upCounter(this)"></textarea>
       <input id =counter type=text ><input>
</body>
</html>
0
 
LVL 6

Expert Comment

by:system_down
ID: 18035191

Ups forgot to give some explanation:

- to autowrap use CSS with overflow propreties.
- to update corretly use onkeyup

Let me know
S_D
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18037414
I tried your example. Now the textarea doesn't scroll to the right but it doesn't wrap either :)
0
 
LVL 6

Expert Comment

by:system_down
ID: 18037707
Sorry forgot it...


<html>
     <head>
          <title>demo</title>
          <head>
               <script type="text/javascript">
                 
                         var limit = 7; // set to whatever you want the limit to be
                    var main = "";
                    var count = 0;
                    var check = 0;
                          function upCounter(obj){
                              var input = document.getElementById('counter');
                              var str = obj.value;
                                var count = str.length;
                          var count2 = count - check;
                        if(count2 == limit) {
                                    obj.value = str + "\n";
                                    check += (limit + 1);
                                 }
                              input.value = count;
                         }
                         
               </script>
                  <style type="text/css" media="screen">
                       textarea{overflow-x:hidden; overflow-y:auto;}
                 
                    </style>
          </head>
<body>
     <textarea onkeyup="upCounter(this)"  onKeyPress="upCounter(this);"  onKeyDown="upCounter(this)"></textarea>
      <input id =counter type=text ><input>
</body>
</html>
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18037806
It does the same thing. Wraps text fine. If I type in and delete afterwards, no wrapping anymore.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18038039
Almost, but gotta go

<script>
var maxChars=7;
var fld = null;
var tId="";
function splitIt() {
  if (!fld) return;
  var val = fld.value
  var newVal = "";
  var len = val.length
  while (len>=maxChars) {
    newVal +='\n'+val.substring(0,maxChars)
    val = val.substring(maxChars)
    len = val.length
  }
  newVal += val;
  if (newVal.length>maxChars) newVal=newVal.substring(1)
  document.getElementById('x').innerHTML='<pre>'+newVal+'</pre>';
}
</script>

<form>
<textarea onFocus="fld = this;tId=setInterval('splitIt()',20)" onblur="clearInterval(tId);splitIt()"></textarea>
</form>
<div id="x"></div>
0
 
LVL 6

Accepted Solution

by:
system_down earned 500 total points
ID: 18038077

<html>
     <head>
          <title>demo</title>
          <head>
               <script type="text/javascript">
                 
                            var limit = 7; // set to whatever you want the limit to be
                    function upCounter(obj){
                              var input = document.getElementById('counter');
                              var str = obj.value;
                                var count = str.length+2;
                                            if((count%limit)==0) {
                                    obj.value = str + "\n";
                                 }
                              input.value = count;
                         }
                         
               </script>
                  <style type="text/css" media="screen">
                       textarea{overflow-x:hidden; overflow-y:auto;}
                 
                    </style>
          </head>
<body>
     <textarea onkeyup="upCounter(this)"></textarea>
      <input id =counter type=text ><input>
</body>
</html>

sorry let me know
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18038531
Now it's working. Thanks.
0
 
LVL 7

Author Comment

by:RealSnaD
ID: 18038543
mplungjan, your solution is pretty cool, but it's not excatly what I needed.
0
 
LVL 6

Expert Comment

by:system_down
ID: 18039972
your welcome :D
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18040682
I did not have time to finish. I just needed to copy the content of the div back onblur
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 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