#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    56
    Rep Power
    13

    Add <b></b> tags to selected text in a textarea


    I have a simple form like so:

    PHP Code:
    <form>
    <
    input type="button" value="BOLD" />
    <
    textarea rows="10" cols="30"></textarea>
    <
    input type="submit" value="SUBMIT" />
    </
    form
    I would like to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "<b>" and a "</b>" wrapped around it. Sort of like formatting text on this forum. (For some reason I can't see the vBulletin JS that's accomplishing the similar task)

    Thanks in advance!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    London, UK
    Posts
    299
    Rep Power
    11
    here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job

    PHP Code:
    <script type="text/javascript">
    <!--
        function 
    formatText (tag) {
            var 
    selectedText document.selection.createRange().text;
            
            if (
    selectedText != "") {
                var 
    newText "<" tag ">" selectedText "</" tag ">";
                
    document.selection.createRange().text newText;
            }
        }
    //-->
    </script>

    <form name="my_form">
        <textarea name="my_textarea"></textarea><br />
        <input type="button" value="bold" onclick="formatText ('b');" />
        <input type="button" value="italic" onclick="formatText ('i');" />
        <input type="button" value="underline" onclick="formatText ('u');" />
    </form> 
    goran
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    56
    Rep Power
    13
    Thanks, Goran.

    Unfortunately I could only get that code to work in IE. It fails in Firefox: 'document.selection' has no properties. I'll plug away a bit and see what I can come up with.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    For Mozilla and friends:
    Code:
      function formatText(el,tagstart,tagend) {
      	if (el.setSelectionRange) {
     		el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
      	}
      	else {
      		// IE code here...
      	}
      }
      ..
      <input type="button" value="BOLD" onclick="formatText(document.getElementById('myta'),'<b>','</b>')"/>
      <textarea id="myta" rows="10" cols="30"></textarea>
      <input type="submit" value="SUBMIT" />
      </form>
    Hope this helps,
    Jeroen
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    56
    Rep Power
    13
    Thanks - you rock.

    Still doesn't work in Safari, but Google searches reveal that this is a limitation of Safarai (and Konqueror), which does not provide a programmatic way of inserting a cursor in a textarea.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    1
    Rep Power
    0

    BOLD doesn't appear as bold in textarea


    I have been trying to look a wayaround to solve somewhat similar problem, but it seems like bold tag appears in coding and not word doesn't appear to be bold in the textarea. Please tell me does textarea does even support rich formatting??
    is there any way around for this problem? how does all those web text editors work out there?

    Originally Posted by cleaner416
    I have a simple form like so:

    PHP Code:
    <form>
    <
    input type="button" value="BOLD" />
    <
    textarea rows="10" cols="30"></textarea>
    <
    input type="submit" value="SUBMIT" />
    </
    form
    I would like to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "<b>" and a "</b>" wrapped around it. Sort of like formatting text on this forum. (For some reason I can't see the vBulletin JS that's accomplishing the similar task)

    Thanks in advance!
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    8
    Rep Power
    0
    As of today, a year later after this post. The same code for mozilla browers does work in safari.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    1
    Rep Power
    0

    Thumbs up


    Yea, it may not be the right way.....but it really works.....great

    Can u pls tell hw it can a bold text can be made to non-bold text.
    Thanx



    Originally Posted by GoMo
    here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job

    PHP Code:
    <script type="text/javascript">
    <!--
        function 
    formatText (tag) {
            var 
    selectedText document.selection.createRange().text;
            
            if (
    selectedText != "") {
                var 
    newText "<" tag ">" selectedText "</" tag ">";
                
    document.selection.createRange().text newText;
            }
        }
    //-->
    </script>

    <form name="my_form">
        <textarea name="my_textarea"></textarea><br />
        <input type="button" value="bold" onclick="formatText ('b');" />
        <input type="button" value="italic" onclick="formatText ('i');" />
        <input type="button" value="underline" onclick="formatText ('u');" />
    </form> 
    goran

IMN logo majestic logo threadwatch logo seochat tools logo