newbie question: trouble with document.selection.createRange();

Discussion in 'Javascript' started by lawrence, May 1, 2004.

  1. lawrence

    lawrence Guest

    Below you'll see some code that I have in one of my forms. I was
    hoping to have these buttons and when I click on them they would take
    selected text from a textarea box and replace it with the text but
    surrounded with the HTML tags I wanted. But I can't get this to work.
    Why?









    <script language="javascript">
    function wrapSelectionBold (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<b>' + range.text + '<\/b>';
    }
    function wrapSelectionItalic (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<i>' + range.text + '<\/i>';
    }
    function wrapSelectionBlockQuote (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<blockquote>' + range.text + '<\/blockquote>';
    }
    function wrapSelectionBigHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h1>' + range.text + '<\/h1>';
    }
    function wrapSelectionSmallHeadline (element) {
    var range = document.selection.createRange();
    if (range.parentElement() == element)
    range.text = '<h3>' + range.text + '<\/h3>';
    }
    </script>


    <input type="button" value="bold"
    onclick="wrapSelectionBold(this.form.inputId2)" />
    <input type="button" value="italic"
    onclick="wrapSelectionItalic(this.form.inputId2)"/>
    <input type="button" value="blockquote"
    onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    <input type="button" value="big headline"
    onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    <input type="button" value="small headline"
    onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>







    <div class="formElement">
    Change the brief description or introduction for your Weblog; <br>
    Or change the contents of your Webpage:<br>
    <textarea id="inputId2" name="formInputs[cbMainContent]"
    class="textareaInput"> </textarea>
    <p>HTML into symbols? <input type="checkbox"
    name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>

    </div>
     
    lawrence, May 1, 2004
    #1
    1. Advertising

  2. lawrence

    lawrence Guest

    Re: newbie question: how to wrap selected text in an HTML tag?

    Mostly I'm wondering if "this.form.inputId2" is the right syntax, or
    does it need to be fuller, something with
    document.form.element(id).value, etc. What is the best way to go?


    (lawrence) wrote in message news:<>...
    > Below you'll see some code that I have in one of my forms. I was
    > hoping to have these buttons and when I click on them they would take
    > selected text from a textarea box and replace it with the text but
    > surrounded with the HTML tags I wanted. But I can't get this to work.
    > Why?
    >
    >
    >
    >
    >
    > <script language="javascript">
    > function wrapSelectionBold (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<b>' + range.text + '<\/b>';
    > }
    > function wrapSelectionItalic (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<i>' + range.text + '<\/i>';
    > }
    > function wrapSelectionBlockQuote (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<blockquote>' + range.text + '<\/blockquote>';
    > }
    > function wrapSelectionBigHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h1>' + range.text + '<\/h1>';
    > }
    > function wrapSelectionSmallHeadline (element) {
    > var range = document.selection.createRange();
    > if (range.parentElement() == element)
    > range.text = '<h3>' + range.text + '<\/h3>';
    > }
    > </script>
    >
    >
    > <input type="button" value="bold"
    > onclick="wrapSelectionBold(this.form.inputId2)" />
    > <input type="button" value="italic"
    > onclick="wrapSelectionItalic(this.form.inputId2)"/>
    > <input type="button" value="blockquote"
    > onclick="wrapSelectionBlockQuote(this.form.inputId2)"/>
    > <input type="button" value="big headline"
    > onclick="wrapSelectionBigHeadline(this.form.inputId2)"/>
    > <input type="button" value="small headline"
    > onclick="wrapSelectionSmallHeadline(this.form.inputId2)"/>
    >
    >
    >
    > <div class="formElement">
    > Change the brief description or introduction for your Weblog; <br>
    > Or change the contents of your Webpage:<br>
    > <textarea id="inputId2" name="formInputs[cbMainContent]"
    > class="textareaInput"> </textarea>
    > <p>HTML into symbols? <input type="checkbox"
    > name="formInputs[usingHtml]" value="y" class="textareaCheckbox"></p>
    >
    > </div>
     
    lawrence, May 1, 2004
    #2
    1. Advertising

  3. Re: newbie question: how to wrap selected text in an HTML tag?

    On 1 May 2004 12:56:35 -0700, lawrence <> wrote:

    > Mostly I'm wondering if "this.form.inputId2" is the right syntax, or
    > does it need to be fuller, something with
    > document.form.element(id).value, etc. What is the best way to go?


    Your original question has been answered in the latter version of this
    thread. As for the question above, it is best if you use the DOM
    collections to access controls that utilise id attributes:

    this.form.elements[ 'inputId2' ]

    To access a form that uses an id attribute, use

    document.forms[ 'formID' ]

    Hope that helps,
    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, May 3, 2004
    #3
  4. lawrence

    lawrence Guest

    Re: newbie question: how to wrap selected text in an HTML tag?

    Michael Winter <> wrote in message
    > Your original question has been answered in the latter version of this
    > thread. As for the question above, it is best if you use the DOM
    > collections to access controls that utilise id attributes:
    >
    > this.form.elements[ 'inputId2' ]
    >
    > To access a form that uses an id attribute, use
    >
    > document.forms[ 'formID' ]
    >
    > Hope that helps,
    > Mike


    Thanks. And if I have only one form on the page, then these two work
    about the same?

    document.forms[0].elements[ 'inputId2' ]

    document.forms[ 'formID' ]
     
    lawrence, May 4, 2004
    #4
  5. Re: newbie question: how to wrap selected text in an HTML tag?

    On 4 May 2004 09:49:21 -0700, lawrence <> wrote:

    [snip]

    > Thanks. And if I have only one form on the page, then these two work
    > about the same?
    >
    > document.forms[0].elements[ 'inputId2' ]
    >
    > document.forms[ 'formID' ]


    Yes. You can use either of the collections (forms and elements) with
    indicies, or strings that contain the name or id of the form/control. So
    with this HTML snippet:

    <body>
    ...
    <form id="myForm">
    ...
    </form>

    Both of these expressions return a reference to the same control:

    document.forms[ 0 ]
    document.forms[ 'myForm' ]

    Hope that helps,
    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, May 4, 2004
    #5
  6. lawrence

    lawrence Guest

    Re: newbie question: how to wrap selected text in an HTML tag?

    Since one can't grab a selection in Netscape (there is no range() ) is
    there a way to find out where the cursor is in a text box and insert
    text there?


    Michael Winter <> wrote in message news:<>...
    > On 4 May 2004 09:49:21 -0700, lawrence <> wrote:
    >
    > [snip]
    >
    > > Thanks. And if I have only one form on the page, then these two work
    > > about the same?
    > >
    > > document.forms[0].elements[ 'inputId2' ]
    > >
    > > document.forms[ 'formID' ]

    >
    > Yes. You can use either of the collections (forms and elements) with
    > indicies, or strings that contain the name or id of the form/control. So
    > with this HTML snippet:
    >
    > <body>
    > ...
    > <form id="myForm">
    > ...
    > </form>
    >
    > Both of these expressions return a reference to the same control:
    >
    > document.forms[ 0 ]
    > document.forms[ 'myForm' ]
    >
    > Hope that helps,
    > Mike
     
    lawrence, May 6, 2004
    #6
  7. Re: newbie question: how to wrap selected text in an HTML tag?

    On 5 May 2004 17:56:17 -0700, lawrence <> wrote:

    > Since one can't grab a selection in Netscape (there is no range() ) is
    > there a way to find out where the cursor is in a text box and insert
    > text there?


    Not that I know of (that doesn't necessarily mean there isn't a way).

    [snipped top-post]

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, May 6, 2004
    #7
  8. Re: newbie question: how to wrap selected text in an HTML tag?

    lawrence wrote:

    > Since one can't grab a selection in Netscape (there is no range() )


    There is in versions 6 and above, but it is named different.

    > is there a way to find out where the cursor is in a text box and
    > insert text there? [...]


    There is. This is a FAQ, please search before you post.

    > [Top post]


    And please do not do that, see the FAQ, too.


    PointedEars
     
    Thomas 'PointedEars' Lahn, May 19, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew Crowe
    Replies:
    1
    Views:
    4,500
    Andrew Crowe
    Sep 13, 2004
  2. Martin Karlsson
    Replies:
    1
    Views:
    102
  3. lawrence
    Replies:
    14
    Views:
    247
  4. Replies:
    2
    Views:
    274
  5. Martin Nadoll

    document.selection.createRange()

    Martin Nadoll, Apr 20, 2009, in forum: Javascript
    Replies:
    1
    Views:
    377
    Thomas 'PointedEars' Lahn
    Apr 20, 2009
Loading...

Share This Page