Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 535
  • Last Modified:

Wrapping single words in textarea

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
Yury Merezhkov
Asked:
Yury Merezhkov
  • 10
  • 5
  • 3
  • +5
1 Solution
 
sodalitasCommented:
I don't have firefox on this machine, but the wrap="virtual" property on the textarea doesn't do the trick?
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
nope, it doesn't
0
 
mark-bCommented:
How about this?:

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

-Mark
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
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
 
mark-bCommented:
Bah.  Forget it.  I read your question wrong.  :(
0
 
rama_krishna580Commented:
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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
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
 
rama_krishna580Commented:
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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
They all scroll to the right.
0
 
dasmaerCommented:
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
 
gops1Commented:
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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
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
 
system_downCommented:

<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
 
system_downCommented:

Ups forgot to give some explanation:

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

Let me know
S_D
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
I tried your example. Now the textarea doesn't scroll to the right but it doesn't wrap either :)
0
 
system_downCommented:
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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
It does the same thing. Wraps text fine. If I type in and delete afterwards, no wrapping anymore.
0
 
Michel PlungjanIT ExpertCommented:
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
 
system_downCommented:

<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
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Now it's working. Thanks.
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
mplungjan, your solution is pretty cool, but it's not excatly what I needed.
0
 
system_downCommented:
your welcome :D
0
 
Michel PlungjanIT ExpertCommented:
I did not have time to finish. I just needed to copy the content of the div back onblur
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 10
  • 5
  • 3
  • +5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now