Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Firefox srcElement Issue

Reply
Thread Tools

Firefox srcElement Issue

 
 
Jake G
Guest
Posts: n/a
 
      06-05-2007
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>

 
Reply With Quote
 
 
 
 
Geoffrey Summerhayes
Guest
Posts: n/a
 
      06-05-2007
On Jun 5, 2:17 pm, Jake G <(E-Mail Removed)> 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

 
Reply With Quote
 
 
 
 
Jason
Guest
Posts: n/a
 
      06-05-2007
On Jun 5, 2:33 pm, Geoffrey Summerhayes <(E-Mail Removed)> wrote:
> On Jun 5, 2:17 pm, Jake G <(E-Mail Removed)> 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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      06-06-2007
On Jun 6, 4:17 am, Jake G <(E-Mail Removed)> 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
srcElement and innerText and? GarryJones Javascript 5 09-06-2008 12:06 PM
Returning "Label" value with srcElement stevewy@hotmail.com Javascript 4 02-06-2007 09:03 AM
Finding srcElement element value stevewy@hotmail.com Javascript 9 02-02-2007 11:23 PM
event.srcElement Josselin Javascript 3 05-30-2006 04:27 PM
srcElement in IE = what in Netscape? Dan Javascript 3 07-29-2003 08:23 AM



Advertisments