Retrieve selected data from text area.

I think you will find the code for Mozilla and Firefox is different than for IE, so you might consider the code below, also checking for Mozilla as well as firefox (I hate pages that assume that firefox is the only Mozilla like browser.  Mozilla and Netscape existed long before firefox and still Mozilla beats FF for rendering) --

function getSelecetedTextarea(){ 
var isFF = false; 
var textselected = false; 
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){ 
isFF = true; 
} 
var myArea = document.getElementById("body"); 
var begin,selection,end; 
if (isFF == true){ 
if (myArea.selectionStart!= undefined) {  
begin = myArea.value.substr(0, myArea.selectionStart);  
selection = myArea.value.substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);  
end = myArea.value.substr(myArea.selectionEnd); 
if (selection.length > 0){ 
textselected = true; 
} 
} 
}else{ 
if (window.getSelection){ 
selection = window.getSelection(); 
}else if (document.getSelection){ 
selection = document.getSelection(); 
}else if (document.selection){ 
selection = document.selection.createRange().text; 
} 
var startPos = myArea.value.indexOf(selection); 
if (startPos!= 0){ 
var endPos = myArea.value.indexOf(selection) + selection.length; 
begin = myArea.value.substr(0,startPos); 
end = myArea.value.substr(endPos, myArea.value.length); 
textselected = true; 
} 
} 
if(textselected == true){ 
switch (t){ 
case "code": 
startTag = "[xcode]"; 
endTag = "[/xcode]\n"; 
break; 
 
case "bold":
startTag = "[xb]";
endTag = "[/xb]";
break;
 
case "italics":
startTag = "[xi]";
endTag = "[/xi]";
break;
 
case "link":
startTag = "[xlink url=#*$!#*$!]";
endTag = "[/xlink]";
break;
}
myArea.value = begin + startTag + selection + endTag + end;
myArea.focus();
}else{
alert("No text selected.\nNo tags added");
}
}
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:

here are some others with selected text, you can apply this to a textarea too --

http://weblogs.asp.net/skillet/archive/2005/03/24/395838.aspx
http://codingforums.com/archive/index.php?t-44821.html
http://www.codetoad.com/javascript_get_selected_text.asp

I think you will find the createRange is IE specific and doesn't work right on the other browsers.  Sorry.

scrathcyboy

I saw that example on the internet this morning when I was looking for something similar.  I believe the user in that case was trying to add formatting tags to selected text.  This person is asking for a solution to grab the selected text in a textarea onmouseup of that textarea.  My solution does exactly that for IE and FF.

Perhaps you can take the code I posted and only change the part that makes it work for mozilla so that he gets a complete solution and then it will be there for future searches?  I think all you would have to do is tweak the GetSelectedText() function slightly.

Thanks!

@yerzu and GaryRasmussen

On IE7 your version only allows me to select one letter before it fires.

FYI...testing the other one now.

@scrathcyboy

I get nothing in any browser.  Care to supply the whole working page?

try the links I gave, there are lots more, with lots of divergent information.  I can give you a general link if you want, but I am sure you can do this too....

That is because the textarea is empty.  You said that you wanted the script it to fire onmouseup so if the textarea is empty and you click in it to start typing, the mouseup evfent fires.  I modified the MouseUp function to allow you to enter the textarea and start typing if it is blank.  Let me know if I am not understanding you correctly.

function MouseUp(e)      
{      if (!e) var e = window.event
      var box = (e.srcElement) ? e.srcElement : e.target
      if (box.value == "")
      {      return
      }
      var selText = GetSelectedText(box)
    alert (selText)
}

Actually yerzu's is the simplest and works cross-browser if I change the event to onlosecapture.  Thank you everybody for looking at this.

No...my textarea was not empty Gary.

change onSelect to onClick ... now its work good in IE7:)

I tested my solution in IE7 and FF 2 and it works exactly as you asked.  you left mouse click and while holding the mouse button down, you drag to the right selecting some text.  When you mouseup to stop selecting, all the selected text is is saved to a variable to do what you want.  Isn't that exactly what you asked for?  I'm confused.

I'll try it again but that is not the behavior I got with IE7.

I don't get it.  I just tested my code again and now the select function is not working correctly.  I must have had my test page cached and then changed it somehow before submitting it.  Nevermind, I would go with yerzu.  Thanks, and sorry about the mix up.

The fruits of your labor.

http://www.rodsdot.com/ee/text_select3.asp

You need to change it to the following.  And the points should be split between myself and yerzu.  If you click in the text area and mouseup without selecting anything, then it thinks everything in the textarea was selected.  The following works perfectly.


<html>
<head>
<title></title>
<script language=javascript>
function Init()
{      var box = document.getElementById("txtWrite")
     
      box.onmouseup = MouseUp
      if (box.captureEvents)
      {      box.captureEvents(Event.MOUSEUP)
      }
}

function MouseUp(e)      
{      if (!e) var e = window.event

      var box = (e.srcElement) ? e.srcElement : e.target
      var selText = GetSelectedText()
      if (selText != "")
      {      alert(selText)
      }
}

function GetSelectedText()
{      if (document.selection)
      {      return (document.selection.createRange().text)
      }
      else if (txt.selectionStart || txt.selectionStart === 0)
      {      return (txt.value.substring (txt.selectionStart|0,txt.selectionEnd|0))
      }
}


</script>
</head>
<body onload="Init()">
<form ID="Form1">
<textarea id="txtWrite" rows="20" cols="20" NAME="txtWrite"></textarea>
</form>
</body>
</html>

yerzu,

Can you explain this syntax?
 else if (txt.selectionStart || txt.selectionStart === 0)
      {      return (txt.value.substring (txt.selectionStart|0,txt.selectionEnd|0))

I have never seen the use of === or the |

Thanks!

|| is a logical operator OR
=== this is small mistake, should be ==, change it!;)

yerzu, thanks.  yes, I know what || is but how is the single bar it working in ...
txt.value.substring (txt.selectionStart|0,txt.selectionEnd|0)

I must have copied it wrong into my test page, but it does work cross-browser.

rdivilbiss

Did you see the comment about the === ?

In the GetSelectedText() function, make sure you change === to ==

Thanks!

Thanks everybody.  I put youo as contributors on the tutorial page which is answering another Q here, so you answered part of another Q.

This is what I'm using.

<script language=javascript>
function Init() {
      var box = document.getElementById("txtWrite")
      box.onmouseup = MouseUp
      if (box.captureEvents){
            box.captureEvents(Event.MOUSEUP)
      }
}

function MouseUp(e) {
      if (!e) {
            var e = window.event;
      }
      var box = (e.srcElement) ? e.srcElement : e.target
      var selText = GetSelectedText(box)
      if (selText!='') {
            document.getElementById('hlText').value=selText;
      }      
}

function GetSelectedText(input)      {
      //if (document.selection && document.selection.createRange().text != '')      {
      if (document.selection)      {
            return (document.selection.createRange().text)
      } else {
            var startPos = input.selectionStart;
            var endPos = input.selectionEnd;
            return input.value.substring(startPos, endPos);
      }
}
</script>

rdivilbiss,

you are posting the old code that has an issue.  Please use the code posted here at ID 21867411

And then change the GetSelectedText() function, change === to ==

this is also OR, x|y if x OR y value is 1 then return 1 in bit type not logical - this is different with || :)
main difference between bit operators and logical operators are prioritis of values in variables, its clear?:)