Firefox srcElement Issue

Discussion in 'Javascript' started by Jake G, Jun 5, 2007.

  1. Jake G

    Jake G Guest

    Ok. I have figured out my whole script except how to make it work in
    FF. It is a script that lets a user know how many characters they
    have left for a textbox. Here is the code, is anyone savy enough to
    tell me why this wont work in FF?

    Any help would be appreciated. Thank you.

    Code:

    <script>
    function count()
    {
    var myObject = event.srcElement;
    fieldID = myObject.id;
    boxtitle = myObject.title;
    maximumLength = document.getElementById(boxtitle).maxLength;
    var boxtop = myObject.style.top.replace(/px/g, "") * 1;
    var boxleft = myObject.style.left.replace(/px/g, "") * 1;
    var boxwidth = myObject.style.width.replace(/px/g, "") * 1;

    if(document.getElementById(fieldID).value != "")
    {
    myspan = document.getElementById(fieldID + 'CNT')

    charleft = maximumLength -
    document.getElementById(fieldID).value.length;
    charleft = "" + charleft //convert to string


    if (charleft.length == 3) {
    myspan.innerText = "Characters left: " + charleft
    }

    if (charleft.length == 2) {
    myspan.innerText = "Characters left: 0" + charleft
    }

    if (charleft.length == 1) {
    myspan.innerText = "Characters left: 00" + charleft
    }

    myspan.style.top = boxtop - 15
    myspan.style.left = boxleft + boxwidth - 107
    }

    }
    </script>


    <script>
    document.getElementById("TXTAREA01").onkeyup = count;
    document.getElementById("TXTAREA02").onkeyup = count;
    document.getElementById("TXTAREA03").onkeyup = count;
    document.getElementById("TXTAREA04").onkeyup = count;
    </script>


    <span id = 'TXTAREA01CNT' style='font-family:Arial; font-
    weight:Bold ;position: absolute;'></span>
    <span id = 'TXTAREA02CNT' style='font-family:Arial; font-
    weight:Bold ;position: absolute;'></span>
    <span id = 'TXTAREA03CNT' style='font-family:Arial; font-
    weight:Bold ;position: absolute;'></span>
    <span id = 'TXTAREA04CNT' style='font-family:Arial; font-
    weight:Bold ;position: absolute;'></span>
     
    Jake G, Jun 5, 2007
    #1
    1. Advertising

  2. On Jun 5, 2:17 pm, Jake G <> wrote:
    > Ok. I have figured out my whole script except how to make it work in
    > FF. It is a script that lets a user know how many characters they
    > have left for a textbox. Here is the code, is anyone savy enough to
    > tell me why this wont work in FF?
    >
    > Any help would be appreciated. Thank you.
    >
    > Code:
    >
    > <script>
    > function count()
    > {
    > var myObject = event.srcElement;
    > fieldID = myObject.id;
    > boxtitle = myObject.title;
    > maximumLength = document.getElementById(boxtitle).maxLength;
    > var boxtop = myObject.style.top.replace(/px/g, "") * 1;
    > var boxleft = myObject.style.left.replace(/px/g, "") * 1;
    > var boxwidth = myObject.style.width.replace(/px/g, "") * 1;
    >
    > if(document.getElementById(fieldID).value != "")
    > {
    > myspan = document.getElementById(fieldID + 'CNT')
    >
    > charleft = maximumLength -
    > document.getElementById(fieldID).value.length;
    > charleft = "" + charleft //convert to string
    >
    > if (charleft.length == 3) {
    > myspan.innerText = "Characters left: " + charleft


    Google this group for 'innerText'

    ---
    Geoff
     
    Geoffrey Summerhayes, Jun 5, 2007
    #2
    1. Advertising

  3. Jake G

    Jason Guest

    On Jun 5, 2:33 pm, Geoffrey Summerhayes <> wrote:
    > On Jun 5, 2:17 pm, Jake G <> wrote:
    >
    >
    >
    > > Ok. I have figured out my whole script except how to make it work in
    > > FF. It is a script that lets a user know how many characters they
    > > have left for a textbox. Here is the code, is anyone savy enough to
    > > tell me why this wont work in FF?

    >
    > > Any help would be appreciated. Thank you.

    >
    > > Code:

    >
    > > <script>
    > > function count()
    > > {
    > > var myObject = event.srcElement;
    > > fieldID = myObject.id;
    > > boxtitle = myObject.title;
    > > maximumLength = document.getElementById(boxtitle).maxLength;
    > > var boxtop = myObject.style.top.replace(/px/g, "") * 1;
    > > var boxleft = myObject.style.left.replace(/px/g, "") * 1;
    > > var boxwidth = myObject.style.width.replace(/px/g, "") * 1;

    >
    > > if(document.getElementById(fieldID).value != "")
    > > {
    > > myspan = document.getElementById(fieldID + 'CNT')

    >
    > > charleft = maximumLength -
    > > document.getElementById(fieldID).value.length;
    > > charleft = "" + charleft //convert to string

    >
    > > if (charleft.length == 3) {
    > > myspan.innerText = "Characters left: " + charleft

    >
    > Google this group for 'innerText'
    >
    > ---
    > Geoff


    Also Google it for 'event'

    -Jason
     
    Jason, Jun 5, 2007
    #3
  4. Jake G

    RobG Guest

    On Jun 6, 4:17 am, Jake G <> wrote:
    > Ok. I have figured out my whole script except how to make it work in
    > FF. It is a script that lets a user know how many characters they
    > have left for a textbox. Here is the code, is anyone savy enough to
    > tell me why this wont work in FF?
    >
    > Any help would be appreciated. Thank you.
    >
    > Code:
    >
    > <script>
    > function count()
    > {
    > var myObject = event.srcElement;


    Firefox (and other browsers) impelement the W3C event model, which is
    different to to IE's. When you attach an event handler the way you
    have, Firefox will pass a reference to the event object as the first
    argument.

    You might find the following useful:

    <URL: http://www.quirksmode.org/js/introevents.html >


    Also, the W3C equivalent to srcElement is target, so to get cross
    browser compatability:

    function count(evt) {
    var evt = evt || event;
    var myObject = evt.target || evt.srcElement;


    However, based on how you are attaching the handler, you can avoid all
    those issues using:

    var myObject = this;


    > fieldID = myObject.id;
    > boxtitle = myObject.title;
    > maximumLength = document.getElementById(boxtitle).maxLength;
    > var boxtop = myObject.style.top.replace(/px/g, "") * 1;


    To convert a value like "10px" to an integer, use parseInt:

    var boxtop = parseInt(myObject.style.top, 10);

    If top has been specified as em or %, the above may not function
    correctly in some browsers.


    > var boxleft = myObject.style.left.replace(/px/g, "") * 1;
    > var boxwidth = myObject.style.width.replace(/px/g, "") * 1;
    >
    > if(document.getElementById(fieldID).value != "")
    > {
    > myspan = document.getElementById(fieldID + 'CNT')
    >
    > charleft = maximumLength -
    > document.getElementById(fieldID).value.length;
    > charleft = "" + charleft //convert to string
    >
    > if (charleft.length == 3) {
    > myspan.innerText = "Characters left: " + charleft
    > }
    >
    > if (charleft.length == 2) {
    > myspan.innerText = "Characters left: 0" + charleft
    > }
    >
    > if (charleft.length == 1) {
    > myspan.innerText = "Characters left: 00" + charleft
    > }


    You can probably write a padding function in a couple of lines rather
    than lots of sequential if's. At the very least, join them with
    'else' clauses so only one is tested.

    e.g.

    function pad(x, n) {
    x = ''+x;
    while (x.length < n) {x = '0'+x}
    return x;
    }

    > myspan.style.top = boxtop - 15
    > myspan.style.left = boxleft + boxwidth - 107


    The value for top and left must be a length, which requires a unit
    (I'll guess you want px):

    myspan.style.top = (boxtop - 15) +'px';
    myspan.style.left = (boxleft + boxwidth - 107) + 'px';


    <URL: http://www.w3.org/TR/CSS21/syndata.html#value-def-length >

    > }
    >
    > }
    >
    > </script>
    >
    > <script>
    > document.getElementById("TXTAREA01").onkeyup = count;
    > document.getElementById("TXTAREA02").onkeyup = count;
    > document.getElementById("TXTAREA03").onkeyup = count;
    > document.getElementById("TXTAREA04").onkeyup = count;


    Given way you are using the event object, you could put the onkeyup
    event on some parent of the textarea elements and just let the event
    bubble up. Otherwise, just use 'this' inside the function to refer to
    the target/srcElement and forget the cross-browser issues.

    > </script>
    >
    > <span id = 'TXTAREA01CNT' style='font-family:Arial; font-
    > weight:Bold ;position: absolute;'></span>


    While CSS is not case sensitive (but must comply with the case
    sensitivity of things outside its control like ID values, XML tag
    names, etc.), it is usual to write values in lower case.


    --
    Rob
     
    RobG, Jun 6, 2007
    #4
    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. Dan
    Replies:
    3
    Views:
    135
  2. Josselin

    event.srcElement

    Josselin, May 29, 2006, in forum: Javascript
    Replies:
    3
    Views:
    118
    Josselin
    May 30, 2006
  3. Replies:
    9
    Views:
    147
  4. Replies:
    4
    Views:
    162
  5. GarryJones

    srcElement and innerText and?

    GarryJones, Sep 6, 2008, in forum: Javascript
    Replies:
    5
    Views:
    155
    Nick S
    Sep 6, 2008
Loading...

Share This Page