Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts

    detecting carriage returns in textareas

    I am just curious if there is a way to detect user inputed carriage returns in a textarea and how I might go about it if it is possible. When re-rendering the input for verification and/or corelation, I would like the input to appear exactly as the user supplied it. If it is not possible to actually detect carriage returns directly, then is there a a key sequence that the user can input to simulate them when the data is re-rendered.

    GW

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    the special characters

    /n = new line
    /r = carriage return

  • #3
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    try using regular expressions to switch all the new line characters to <br /> tags

    for example:
    Code:
    var sTest="Test String/nNew Line";
    var reNewLines=/[\n\r]/g;
    var sFormatted=sTest.replace(reNewLines, "<br />");
    I believe that should work...
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    So basicly there is no way to actually detect the carriage return itself (at least as I am understanding the responses). So my best bet would be to instruct the user that if they want carriage returns in the re-rendered data, they will have to use a key sequence of some sort (or some key that wouldn't normally be used) and I am going to have to check for that (possibly split on that value) and insert the carriage returns with code. It really isn't a problem, I figured I might have to do it that way but wanted to see if there was an easier way to go about it. Thanks for the info.

    GW

  • #5
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    no no... carriage returns/new lines are "hidden" characters. They appear the the computer as /n and /r but appear to the user as returns... like so:
    "

    "
    Does that make sense??
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can render the text as it was entered even without replacing newlines.
    Just put the text inside the <pre>text here</pre> tags and all the newlines, tabs, spaces will be preserved.

  • #7
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    yes, but the problem with that is there is no real "width" limit to "pre" tags. So if the user doesn't enter a line break, the line will go on and on and on across the screen.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Yeah, I thought about using the formated text option, but as was pointed out, if the user doesnt enter any carriage returns then it becomes one long string that stretchs beyond the limits of the document and paper (in the case of printing).

    I think, in the end, what I may end up doing is designating a particular key (maybe the | or the \) as a way for the user to enter a carriage return and then use the split() method to re-render the string. At this point, it seems like the most sensible thing to do.

    The preformated option might be viable as well, but I would still have to check the length of the string and break it down to fit within the given borders of the document, and that sounds like a whole lot more work than designationg a key to represent carriage returns.

    I will fiddle with both options, however and see which one seems to work the best.

    Again, thanks for the info and options.

    GW

  • #9
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    try this on your machine and you'll see how it works...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Template</title>
    <script type="text/javascript">
    function showText(){
    	var oDiv=document.getElementById('previewDiv');
    	var sUserInput=document.getElementById('userText').value;
    	var reNewLines=/[\n\r]/g;
    	oDiv.innerHTML=sUserInput.replace(reNewLines, "<br />");
    }
    </script>
    </head>
    <body>
    Text Preview:
    <div id="previewDiv" style="background: #CCC;">
    </div>
    <textarea id="userText" onkeyup="showText()"></textarea>
    </body>
    </html>
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Oh, it works fine, but there are a few problems, not with the code itself, but rather with the circumstances in which it will be used. So, with that in mind, I will try to describe the potential problems;

    1) I am writing in html 4.0 transitional at this point in time and will freely admit that I have absolutely no experience with the xhtml stuff as of yet. Given these facts, I am not sure how your code would fit into the 1000 some odd lines I have already worked up. Admittedly, I should probably be moving on to the xhtml format, but at the moment, I am still trying to get a complete grip on plain old html and javascript.

    2) The text is part of a data set to be re-rendered in table format in a new window (all data passed on from the parent) and as such, is going to be part of an array that will be stored and/or displayed at the user's request.

    3) While I understand the basics of how your code works, I did notice that it is inserting two carriage returns rather than a single return. I can only guress that it is because you were checking for both \n and \r and in the process of finding both, inserted a line break for each of them. Of course, I could be completely wrong about that as well.

    As it stands right now, I am starting to consider the possibility of breaking things down a bit more and offering a few select boxes (specific to the overall purpose of the form) so that the need for inserting carriage returns is minimized. I am going to have to let a few ideas sit in my head for now and see which one stands out the most when all is said and done.
    Last edited by greasonwolfe; 02-21-2006 at 04:14 AM.

  • #11
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    I got to fiddling around with things and discovered something I should have known all along. There really is a very simple solution to it all. When I re-render the data in table format, I can simply copy the textarea directly (including the textarea tags) into the datacell on the popup page in question. It will then render the text exactly as it was entered. The only downside to this would be finding a way to detect how many actual rows of text there are. The column width would be permanently set leaving only the height to deal with.

    With that in mind, any thoughts on how I might go about detecting the number of rows actually entered? For instance, if the original textarea has a paramter set of say cols=80 rows=5 and the user entered (through text and carriage returns) 7 rows worth of stuff, I would prefer all seven rows to show when it is re-rendered rather than having the scroll bar appear in the new text area. Any thoughts on this would be welcome, or am I barking up the wrong tree now.

    GW

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You could try using the split() function.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    function numRows()
    {
    	var thetext = document.forms[0].text.value;
    	var newtext = thetext.split("\n");
    	var i;
    	for(i=0;i<newtext.length;i++)
    	{
    		document.getElementById('rewrite').innerHTML += newtext[i]+'<br>';
    	}
    	document.forms[0].text.rows = newtext.length;
    	return false;
    }
    </script>
    </head>
    
    <body>
    <form action="#" method="post" onsubmit="return numRows()">
    <textarea name="text" cols="80" rows="8"></textarea><br>
    <input type="submit">
    </form>
    <div id="rewrite"></div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    You know, I thought of that as well, but when I tried it using both "\n" and "\r", the browser game me an object expected error. Admittedly, I may have coded it wrong, but I am pretty sure I had it right in my test case. Will give it another shot based on what you supplied though.

    GW

    Edit. Also, in looking at what you did, that wouldn't compensate for a long paragraph that in and of itself, filled three rows worth of stuff. Still gonna fiddle with it though, this might be the right track to take, but it may be an ugly track as well.
    Last edited by greasonwolfe; 02-21-2006 at 07:17 AM.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its only detecting line breaks not the end of the textarea. You said it will have a set width anways.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Right, but I would also need a height. If I base that height wholly upon the carriage returns and the user only enters two carriage returns with 10 lines worth of text, I would end up with a rows value of just two when it is all re-rendered. But. . . You did get me headed in the right direction. Splitting down the text value based on Carriage returns gives me part of the equation. If I check each part of that array for a length greater than the rendered columns value, I can add to the variable that sets the number of rows. . . something like. . .

    Code:
    function numRows()
    {
                 var therows=1; //set at a minum value of one row
    	var thetext = document.forms[0].text.value;
    	var newtext = thetext.split("\n");
                 therows+=newtext.length;
    	var i;
    	for(i=0;i<newtext.length;i++)
    	{
    		document.getElementById('rewrite').innerHTML += newtext[i]+'<br>';
                             therows+=Math.floor(newtext[i].length/columnwidth) //would check the length of each part of the array and add rows for lengths greater than the maximum column width
    	}
    	document.forms[0].text.rows = newtext.length;
    	return false;
    }

    Then, when I am saving the data for later re-rendering, each dataset will have its own rowheight so to speak. At least, I think this will work the way I want it to. Will have to give it a shot later this morning.

    Edit: Bah, my format got messed up on the code. I should mention, however, that ultimately this value will be passed on to a popup window from an array of datasets. Basicly all the info is coming from a form and once it is calculated/organized and all that good jazz, it is re-rendered in table format for later printing/saving. Everything else is working fine so far, this is just the last little kicker that I would like to work the bugs out of. As always, you guys have been a great help and given me much to think about along with new challenges. Thanks again!
    Last edited by greasonwolfe; 02-21-2006 at 07:36 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •