SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast cfpmedia.com's Avatar
    Join Date
    Nov 2010
    Location
    California, USA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selecting Text Fails in IE

    Hello,

    I am having some difficulties with IE (again).

    I wrote a script that will add the BB Code form of bold in front of a selected piece of text, and an ending form of bold at the end of it.
    So if you were to select the text "moo" from a textarea that says "The cow goes 'moo'.", the result will be "The cow goes '[-b-]moo[/-b-]'."
    (Please note that I'm adding minus "-" signs to the BB Code to avoid it from rendering on this post.)
    (With the use of PHP, the BB Code will be converted into the HTML version of bold later on.)

    I have a form that calls a function:
    Code:
    <input type="button" name="bold" id="bold" value="Make Bold" onclick="make_bold()"><br>
    <form name="new_message" id="new_message" action="result.php" method="get" onsubmit="return check_form()">
    <textarea name="message" id="message" cols="55px;" rows="10px;"></textarea><br>
    <input type="submit" value="Send Message">
    </form>
    And the code for the function is:

    Code:
    <!--
    
    function check_form() {
    
    if (document.getElementById("message").value.length < 1) {
    
    alert("You must type a message.");
    
    document.getElementById("message").focus();
    
    return false;
    
    }
    else {
    
    return true;
    
    }
    
    }
    
    function make_bold() {
    
    var message = document.getElementById("message");
    var selected_text = message.value.substring(message.selectionStart, message.selectionEnd);
    
    message.value = message.value.replace(selected_text, "[-b-]" + selected_text + "[/-b-]");
    
    }
    
    //-->
    (Again with the minus "-" signs to avoid page rendering here.)

    All browsers but IE work perfectly fine.
    The only issue I have with IE is that it puts a [-b-] in front of ALL the content, not just the selected text (like it is supposed to do), and a [/-b-] at the end.
    Instead, it should insert the [-b-] in front of the selected text, and a [/-b-] at the end... But it is not.

    What is wrong with my code, and what might be a work around?

    Thank you.

  2. #2
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    <script type="text/javascript">
    // code for IE
    function make_bold()
    {
    var message = document.getElementById("message");
    if (document.selection)
    {
    message.focus();
    var sel = document.selection.createRange();
    // replace
    sel.text = '<b>' + sel.text + '</b>';
    }
    }
    </script>

  3. #3
    SitePoint Enthusiast cfpmedia.com's Avatar
    Join Date
    Nov 2010
    Location
    California, USA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting...
    Alright, I'll give it a go.
    Thank you.

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are two different methods used. One for IE and one for non-IE browsers. In IE you need to create a text range, in non-IE you can use selectionStart and selectionEnd. The following script has all the details.

    The script has one shortcoming - the replace operation will target the first occurrence of the selected text. For instance if you select a single character "e" at the end of the test sentence the first "e" in the sentence will be shown as selected instead. You might like to sort this out with a more suitable text substring method.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Bold Selection</title>
    <script type="text/javascript">
    <!--
     function showSelection()
       { var mySelection = "";
         var textareaObj = document.getElementById("message");
         if ("selectionStart" in textareaObj)
              { // check if text is selected
                 if (textareaObj.selectionStart != textareaObj.selectionEnd) 
                      { mySelection = textareaObj.value.substring(textareaObj.selectionStart, textareaObj.selectionEnd);
                      }                             }
                 else 
                      { // create range from selection
                         var textRange = document.selection.createRange ();
                        // check whether the selection is within the textarea
                         var rangeParent = textRange.parentElement ();
                         if (rangeParent === textareaObj){ mySelection = textRange.text; }                                
                       }
     
          if (mySelection.length==0)
             { alert ("No text is selected."); 
             }
          else 
             {  var boldSelection=textareaObj.value.replace(mySelection,"<b>"+mySelection+"</b>");            
                textareaObj.value=boldSelection;
                document.getElementById("s1").disabled=false; 
                document.getElementById("b1").disabled=true;  
             }             
          }
    // ------------------
     function check_form() 
      { if(document.getElementById("message").value.length < 1)
        { alert("You must type a message.");
          document.getElementById("message").focus();
          return false;
        }
        else { return true; }
    }
    // ---------------------------
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    form { margin-top:50px; }
    #wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin-left:100px;  }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <form name="new_message" id="new_message" action="#" method="get" onsubmit="return check_form()">
        <p><textarea name="message" id="message" cols="55" rows="10">Select some text and click the Bold button.</textarea></p>
        <p><br>
        <input type="button" id="b1" value="Make Bold" onclick="showSelection()"></p>
        <p><input name="s1" id="s1" type="submit" value="Send Message" disabled></p>
      </form>
      <!-- end form -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •