A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: getSelection in TEXTAREA?

  1. #1
    always learning
    Join Date
    Sep 2004
    Location
    somewhere over the rainbow
    Posts
    90

    getSelection in TEXTAREA?

    Hello all,

    I am trying to create a javascript text editor (only to make BOLD and ITALIC). I can't friggin figure out how to get the selected text in a TEXTAREA.

    I have found many tutorials on how to get the text that is rendered in HTML but not inside the TEXTAREA (textareas are farts ).

    Can some1 please help me out.
    How can I get the selected text from a TEXTAREA?

    Thanks in advance,

    Loo
    Loo fe le vi

  2. #2
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    It's one of those things where there's no common code for all browsers. IE understands document.selection but Mozilla uses a different syntax involving selectionStart and selectionEnd.

    I've only used this kind of functionality once and that was on an application which only had to run in IE so it was straightforward. Have a look at some examples, such as the quick reply box on this very page, and see how they work.
    Last edited by aversion; 12-07-2006 at 09:51 PM.

  3. #3
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Hi,

    Here's a quick example. Try selecting some of the text in the textarea it should (hopefully ) alert the bit of the text you selected

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    onload = function() {
        document.getElementById('txt').onmouseup = function() {
            if (document.selection) { // for IE
                alert(document.selection.createRange().text);
            } else if (typeof this.selectionStart != 'undefined') { // for FF, Opera etc...
                alert(this.value.substring(this.selectionStart, this.selectionEnd));
            } else {
                alert('Could not find selection');
            }
        };
    };
    
    </script>
    </head>
    <body>
    <textarea id="txt" rows="10" cols="50">hello! please select me</textarea>
    </body>
    </html>
    Tested in IE 6, FF 2 and Opera 9.

  4. #4
    always learning
    Join Date
    Sep 2004
    Location
    somewhere over the rainbow
    Posts
    90
    Thank you very much for the response.

    I was able to find some code as well. Thanks again.. I will study your code a bit... I like how you used the onmouseup.

    I ended up doing a copy-paste of:
    Code:
    <script language="javascript">
    
    function goToSection (url){
    
    document.getElementById("section").options.value=document.getElementById("section").options.defaultValue;<!-- I USED TWO LINES OF CODE TO SET THE OPTION TO DEFAULT -->
    document.getElementById("section").value="0";<!-- I USED TWO LINES OF CODE TO SET THE OPTION TO DEFAULT -->
    location.href = url;
    
    }
    
    
    <!--
    function insert(aTag, eTag) {
      var input = document.forms['new_form'].elements['description'];
      input.focus();
      /* fr Internet Explorer */
      if(typeof document.selection != 'undefined') {
        /* Einfgen des Formatierungscodes */
        var range = document.selection.createRange();
        var insText = range.text;
        range.text = aTag + insText + eTag;
        /* Anpassen der Cursorposition */
        range = document.selection.createRange();
        if (insText.length == 0) {
          range.move('character', -eTag.length);
        } else {
          range.moveStart('character', aTag.length + insText.length + eTag.length);      
        }
        range.select();
      }
      /* fr neuere auf Gecko basierende Browser */
      else if(typeof input.selectionStart != 'undefined')
      {
        /* Einfgen des Formatierungscodes */
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var insText = input.value.substring(start, end);
        input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
        /* Anpassen der Cursorposition */
        var pos;
        if (insText.length == 0) {
          pos = start + aTag.length;
        } else {
          pos = start + aTag.length + insText.length + eTag.length;
        }
        input.selectionStart = pos;
        input.selectionEnd = pos;
      }
      /* fr die brigen Browser */
      else
      {
        /* Abfrage der Einfgeposition */
        var pos;
        var re = new RegExp('^[0-9]{0,3}$');
        while(!re.test(pos)) {
          pos = prompt("Einfgen an Position (0.." + input.value.length + "):", "0");
        }
        if(pos > input.value.length) {
          pos = input.value.length;
        }
        /* Einfgen des Formatierungscodes */
        var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
        input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
      }
    }
    //-->
    
    
    </script>

    This function recieves parameters passed from (for example):

    Code:
    <input type="button" value="BOLD" onClick="insert('<b>', '</b>')">
    I got it from a german site
    It has some other uses as well.. but i used it to enter BOLDs and ITALICs only.

    Thanks again!

    Loo
    Loo fe le vi

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center