Solved

Wrapping single words in textarea

Posted on 2006-11-28
26
522 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
Comment Utility
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
Comment Utility
nope, it doesn't
0
 
LVL 7

Expert Comment

by:mark-b
Comment Utility
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
Comment Utility
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
Comment Utility
Bah.  Forget it.  I read your question wrong.  :(
0
 
LVL 23

Expert Comment

by:rama_krishna580
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 7

Author Comment

by:RealSnaD
Comment Utility
They all scroll to the right.
0
 
LVL 5

Expert Comment

by:dasmaer
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 17

Expert Comment

by:gops1
Comment Utility
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
Comment Utility
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
Comment Utility

<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
Comment Utility

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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility

<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
Comment Utility
Now it's working. Thanks.
0
 
LVL 7

Author Comment

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

Expert Comment

by:system_down
Comment Utility
your welcome :D
0
 
LVL 75

Expert Comment

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

743 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

12 Experts available now in Live!

Get 1:1 Help Now