Find underline text inside textarea

I have text inside textarea. User selects some part of text and try to underline that part.

My question is How to find weather selected text is alreay underlined or not? Please give me code.

Thanks in advance.
sanjuoAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
That helped!!!

var selRange = document.selection.createRange();
if (selRange.htmlText.toLowerCase().indexOf('<u>')!=-1) {
   alert(selRange.htmlText+' already contains a selection, please try another');
   return
}
0
 
Michel PlungjanIT ExpertCommented:
you cannot underline inside a textarea
0
 
sanjuoAuthor Commented:
you can do underline inside textarea.
You can create textarea like this

<DIV id=TextArea CONTENTEDITABLE ALIGN=left STYLE="border=1 solid"></DIV>

and you can bold, underline, italic any thing on this text area using execCommand() function.

I have done it. But I am not able to find weather selected text already underlined or not.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
But that is any tag that has that.

Perhaps looking at the innerHTML and look for <u>

Michel
0
 
davlun20080Commented:
I lost my old code sample for this, but had an old snippet that checked to see if the user had the right font on their system but comparing font metrics.  Perhaps you could see if there is a difference in character height, or some other metric that would indicate the font was underlined.  You could do this by comparing the height to a sample that you know is not underlined.

davlun
0
 
Michel PlungjanIT ExpertCommented:
I do not understand why one would make a textarea editable unless it was for the scrollbars. The form won't send the html to the server as far as I can see and not all these buttons work:
<form>
<textarea contenteditable name="t1"></textarea>
<input type="button"
onClick="val1 = this.form.t1.value; t2=this.form.t1.innerHTML;
alert('value:'+t1+'\nhtml:'+t2)" value="Click">
<input type="button"
onClick="this.form.t1.innerHTML+='<u>Hello</u>'" value="Click">
<input type="button"
onClick="this.form.t1.value+='<u>Hello</u>'" value="Click">
</form>

0
 
sanjuoAuthor Commented:
mplungjan,

You have not understand my question, I will explain more...

1. Suppose enduser enter text inside textarea runtime. That is "This is Big Big world!".

2. Then enduser highlighted part of text second 'Big'.

3. I am able to Underline second 'Big'. So the text will show inside textarea like "This is Big <u>Big</u> world!" (I am not able to show underline here)

4. Now enduser again try to select same second 'Big' word then, I want to avoid again underlining same underlined word. For this I wanted to detect weather selected word is underlined or not.

davlun20080

Can you post your example?
0
 
Michel PlungjanIT ExpertCommented:
How?

I could not make it underlined...

If you can show me how you make it underlined I may figure out how to see the underline.
However I am still curious why you use a text area and not just a table cell or a div with owerflow set to scroll

Michel
0
 
davlun20080Commented:
mplungjan,
To make it editable you need to specifiy some settings in script.  Here is a sample at M$ where they have both a div and textarea for comparison....  IE ONLY of course.  I have been playing with this recently for a cms piece i have just started working on.

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/editRegions.htm

sanjuo,
Here is a link:
http://www.webreference.com/dhtml/column30/index.html
They are using the test to check and see if a font is installed, but you may be able to use other font metrics to determine if it is underlined....  just a thought.


as for me.... why would it be so bad to let the select it again, and then underline it again?
0
 
Michel PlungjanIT ExpertCommented:
Davlun: That proved exactly what I said. the textarea shows the html and the div shows the result

Michel
0
 
sanjuoAuthor Commented:
mplungjan,

I already checked this site. Give me 5 min I will post my code.
0
 
sanjuoAuthor Commented:
I am trying to create fill-in-blank question.

"End-user should not able to select any word more than once" this is condition.

Top textarea is for selection. Bottom textarea shows output. Check top and bottom text area.

here is the code:

<html>
<head>
</head>
<BODY onload="javascript:loadForm();">
<Form NAME="Form1" METHOD="Post" Action="">
<TABLE cellSpacing=1 cellPadding=1 width=400 border=1 height=265  bordercolorlight="#99CCFF" bordercolordark="#CFE4FC">
     <TR>
          <TD align=center>Select the phrase you wish to choose for your fill in the blank question, then click on the Select button.</TD>
     </TR>
     <TR>
          <TD width=250 align=Left bgcolor=LightBlue>
          <DIV id=TextArea CONTENTEDITABLE ALIGN=left STYLE="height:100; width:95%; background-color:white; font-face:Arial; padding:3; border:inset #99ccff; scrollbar-base-color:#99ccff; overflow=auto;"></DIV>
          </TD>
     </TR>
     <TR>
          <TD align=center bgcolor=LightBlue>&nbsp;<A href="javascript:findSelection();">Select</a>&nbsp;</TD>
     </TR>
     <TR>
          <TD width=250 align=Left bgcolor=LightBlue>Question text:<TEXTAREA NAME="QText6" ROWS="3" COLS="60" readonly></TEXTAREA></TD>
     </TR>
</TABLE>
</Form>
</BODY>
</html>
<script>
var iCompletion = 0;
function loadForm()
{
     document.Form1.QText6.value = "This is big big world";
     TextArea.innerText = "This is big big world";
}
function findSelection()
{
     var selRange = document.selection.createRange();
     var tArea = TextArea;    
     if(tArea.isContentEditable)
          document.execCommand("Underline");

     var tArea1 = document.all("QText6")
     var stri = tArea1.innerText;

     var oTxtRange = document.selection.createRange();
     oTxtRange.moveToElementText(tArea);
     oTxtRange.setEndPoint('EndToStart', selRange);
   
     var sub1 = oTxtRange.text;
     oTxtRange.setEndPoint('StartToEnd', selRange);

     var sub2 = oTxtRange.text;    
     if(sub2.length>0)
     {
          var sSS = '';
          for(var i=0; i<sub2.length; i++)
          {
               if(i==0)
                    sSS = sSS + iCompletion;
               else
                    sSS = sSS + "_";
          }
          iCompletion = iCompletion + 1;
          var sub3 = stri.substr(0, sub1.length) + sSS + stri.substr((sub1.length + sSS.length));
          document.Form1.QText6.value = sub3;
     }
}
</script>
0
 
Michel PlungjanIT ExpertCommented:
to be inserted between

    var selRange = document.selection.createRange();
and
    var tArea = TextArea;    
0
 
davlun20080Commented:
sorry mplungjan, i know that you really know what you are doing, just thought you were asking to see how to set it up.  

cheers,

davlun
0
 
Michel PlungjanIT ExpertCommented:
I was - I have not used contenteditable myself so I had no idea of what the properties of the strings would be in a textarea - I would f.ex. not expect the html to be sent to the server in a form textarea - I would think the visible underline would disappear or end up as markup (would be clever)

Michel
0
 
sanjuoAuthor Commented:
mplungjan,

Good answer! you got the code also
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.