Format textarea text

Hi folks,
         The task I am trying to accomplish is,
 
         I have a textarea on my page and I paste some text from an excel          sheet onto this textarea. The format comes up as:

         abcd
         jhjshds
         eyyeye
         yueye
         ndgdjj
         ieieue
         iweiene
 
         What I am trying to achieve is, onmouseout function, this input          should turn into Comma Seperated Values, like:

         abcd, jhjshds, eyyeye, yueye, ndgdjj, ieieue, iweiene

         How to go about this?
LVL 10
aman0711Asked:
Who is Participating?
 
hieloCommented:
try:
<textarea rows="10" cols="70" onfocus='this.value=this.value.split(",").join("\n")' onblur='this.value=this.value.split(/\r?\n/g).join(",")'></textarea>

Open in new window

0
 
code-colorsCommented:
Hi,

Try this...

If you want to run the script when the focus lost, change it with
<textarea rows="10" cols="100" onblur="javascript:arrangeTextArea(this.id)"  id="txtTextArea"></textarea>
<html>
<head>
    <title></title>
    <script>
        function arrangeTextArea(txt)
        {
            var curText = document.getElementById(txt).value;
            document.getElementById(txt).value=curText.replace(/\n/gi, ", ");
        }
    </script>
</head>
<body>
    <textarea rows="10" cols="100" onmouseout="javascript:arrangeTextArea(this.id)"  id="txtTextArea"></textarea>
</body>
</html>

Open in new window

0
 
frzsomborCommented:

<script>
function separateWithCommas() {
   var textIn = document.getElementById("txtarea").value;
   var textOut = textIn.replace(/\n/g, ", ");
   document.getElementById("txtarea").value = textOut;
}
</script>

<textarea id="txtarea" onMouseOut="separateWithCommas()">
</textarea>

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
aman0711Author Commented:
Hi frzsombor:

               Your solution isnt working right :(
               I have attached the snapshot. Multiple commas indicate the number of times I did mouseout.

comma.PNG
0
 
aman0711Author Commented:
Hi Code-colors,

        Same sort of result with your script as well :(

 

comma2.PNG
0
 
gamarrojgqCommented:
Hi,

This is a Function that compares char by char, in you textarea add:

onmouseout="javascript:FormatTextArea();"  

notice that inside de function is the code that obtain de textbox control value.
function FormatTextArea(){
        
            var sdata;
            var newdata = "";           
            sdata = document.getElementById("txtTextArea").value;
            for(i=0; i<sdata.length; i++){
                if (sdata[i].charCodeAt(0) == "\n".charCodeAt(0))
                {
                    newdata = newdata + ",";
                }           
                else
                {
                    if(sdata[i].charCodeAt(0) != 13){
                        newdata = newdata + sdata[i];
                    }
                }
            }
            document.getElementById("txtTextArea").value = newdata;
        }

Open in new window

0
 
aman0711Author Commented:
Hi gamarrojgq:
 
                 Your solution didnt work either. Its not doing anything on mouseout.          
0
 
gamarrojgqCommented:
Hi aman0711,

The function use "txtTextArea" as the ID of you textarea control, does your control have this ID?
0
 
aman0711Author Commented:
Hi gamarrojgg,
   
                  Yes I do have that. Below is my complete code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
   <script>

		 function FormatTextArea(){
        
            var sdata;
            var newdata = "";           
            sdata = document.getElementById("txtTextArea").value;
            for(i=0; i<sdata.length; i++){
                if (sdata[i].charCodeAt(0) == "\n".charCodeAt(0))
                {
                    newdata = newdata + ",";
                }           
                else
                {
                    if(sdata[i].charCodeAt(0) != 13){
                        newdata = newdata + sdata[i];
                    }
                }
            }
            document.getElementById("txtTextArea").value = newdata;
        }

  </script>


 </HEAD>

 <BODY>
   
    <textarea rows="10" cols="40" id="txtTextArea" onmouseout="javascript:FormatTextArea();" >

	</textarea>


 </BODY>
</HTML>

Open in new window

errr.PNG
0
 
StealthyDevCommented:
Hi, will this help you?

I have altered code by frzsombor. #2.

Best regards.

<script>
function separateWithCommas() {
   var textIn = document.getElementById("txtarea").value;
   var textOut = textIn.replace(/\r/g, ", ");
   textOut = textOut.replace(/\n/g, "");
   document.getElementById("txtarea").value = textOut;
}
</script>

<textarea id="txtarea" onClick="separateWithCommas()" cols=75 rows=20>
</textarea>

Open in new window

0
 
aman0711Author Commented:
Hi hielo,

                 Long time :)
 
                 You are the boss :-) Fixed.

                 Thanks a ton.
0
 
aman0711Author Commented:
hi senthurpandian,

                  Your solutions worked too , just a little problem. Its starting the formatted String with a comma
0
 
gamarrojgqCommented:
Hi,

I've tried the code and works fine, i'm sending you a file that works in my environment
HTMLPage2.htm
0
 
frzsomborCommented:
@hielo
Nice solution. :)
0
 
hieloCommented:
>>  Long time :)
Ditto.

>>Thanks a ton.
Anytime

Regards,
Hielo
0
 
hieloCommented:
@frzsombor:
Thank you. Occasionally I manage to get one right :)
0
 
aman0711Author Commented:
Thanks folks. Sorry for closing this late
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.