SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Gurus - how to write on a page, onChange?

    Well guys, back to JavaScript Gurus. Here is a script.

    PHP Code:
    // In head
    function myCustomOnChangeHandler(inst) {
        var newLength=250-inst.getBody().innerHTML.length;
        alert(newLength);
    }//then in body
    <textarea name="limitedtextarea" id="limitedtextarea" cols="60" rows="6"><?=$message?></textarea>
    Nw this works fine. Each time I type something in the textarea, I get an alert with the number of characters left in the textarea (250 - number typed). No problem here.

    I now want to get this displayed below the textarea, the number of characers left, onchange and also when the page loads, in a span or in a text box.

    So, I changed the code slighly
    PHP Code:
    // In head
    function myCustomOnChangeHandler(inst) {
        var newLength=250-inst.getBody().innerHTML.length;
    }//then in body
    <textarea name="limitedtextarea" id="limitedtextarea" cols="60" rows="6"><?=$message?></textarea>
    Characters left => <script type="text/javascript">myCustomOnChangeHandler(limitedtextarea)</script>/250
    I am getting an error 'limitedtextarea' is undefined. Also, I am not sure if this is the right code.

    Can anyone help?
    Thanks for your time friends.
    Best.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just do this:
    Code:
    // In head
    function myCustomOnChangeHandler(inst) {
        var newLength=250-inst.getBody().innerHTML.length;
        document.getElementById('messagelength').innerHTML = 'Message length: ' + newLength;
    }//then in body
    <textarea name="limitedtextarea" id="limitedtextarea" cols="60" rows="6"><?=$message?></textarea>
    <span id="messagelength">Message length: 0</span>

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raffles, thanks a lot. I was working with the tinyMCE WYSWYG here. Your code is working perfectly. Thanks for your help. However, I will have to find some other fixes as the tinyMCE event handler is onChange, and not onKeyup. For this kind of work, an onKeyup is more user friendly, onChange doens't work. Once I find that solution, the issue will be solved.

    If you have any idea, feel free to drop your advice ...
    Thanks again
    Best

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the textareas value property instead of innerHTML. Since Textareas are not supposed to contain HTML inside. innerHTML will therefore fail in certain browsers.

    Also note that the user might paste in a large text using ctrl + v or via the contextmenu.


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
  •