Firefox srcElement Issue - Javascript

On Jun 5, 2:17 pm, Jake G <jgood...@dps.state.oh.us> 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

On Jun 5, 2:33 pm, Geoffrey Summerhayes <sumr...@> wrote:
> On Jun 5, 2:17 pm, Jake G <jgood...@dps.state.oh.us> 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

On Jun 6, 4:17 am, Jake G <jgood...@dps.state.oh.us> 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.h...lue-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