?
Solved

Find underline text inside textarea

Posted on 2002-04-25
16
Medium Priority
?
935 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
16 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6969705
you cannot underline inside a textarea
0
 

Author Comment

by:sanjuo
ID: 6969759
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
ID: 6969837
But that is any tag that has that.

Perhaps looking at the innerHTML and look for <u>

Michel
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:davlun20080
ID: 6970413
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
ID: 6970543
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
ID: 6971340
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
ID: 6971522
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
ID: 6972557
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
 
LVL 75

Expert Comment

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

Michel
0
 

Author Comment

by:sanjuo
ID: 6980889
mplungjan,

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

Author Comment

by:sanjuo
ID: 6981093
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 400 total points
ID: 6982311
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
ID: 6982312
to be inserted between

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

Expert Comment

by:davlun20080
ID: 6982453
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
ID: 6982941
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
ID: 6984010
mplungjan,

Good answer! you got the code also
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

765 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