Solved

Find underline text inside textarea

Posted on 2002-04-25
16
854 Views
Last Modified: 2008-03-04
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.
0
Comment
Question by:sanjuo
  • 8
  • 5
  • 3
16 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
you cannot underline inside a textarea
0
 

Author Comment

by:sanjuo
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
But that is any tag that has that.

Perhaps looking at the innerHTML and look for <u>

Michel
0
 
LVL 3

Expert Comment

by:davlun20080
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:sanjuo
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 3

Expert Comment

by:davlun20080
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Davlun: That proved exactly what I said. the textarea shows the html and the div shows the result

Michel
0
 

Author Comment

by:sanjuo
Comment Utility
mplungjan,

I already checked this site. Give me 5 min I will post my code.
0
 

Author Comment

by:sanjuo
Comment Utility
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 100 total points
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
to be inserted between

    var selRange = document.selection.createRange();
and
    var tArea = TextArea;    
0
 
LVL 3

Expert Comment

by:davlun20080
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:sanjuo
Comment Utility
mplungjan,

Good answer! you got the code also
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now