srcElement.value in firefox - Softwareontwikkeling

dinsdag 22 januari 2008 14:47

Acties:

Met een hamer past alles.

Topicstarter

Ik ben bezig met een invoerformpje waarbij er clientside een aantal correcties toegepst kunnen worden op de invoerveldjes, zoals bijvoorbeeld initialen omzetten naar hoofdletters. Als ik bijv d.a. invul, moet dat dmv een onchange event naar D.A. omgezet worden.

de code die ik hiervoor heb is redelijk simpel

HTML:

<input type="text" id="voorletters" name="voorletters" onchange="allUpperCase();">

<script>
function allUpperCase(){
this.event.srcElement.value = this.event.srcElement.value.toUpperCase();
}
</script>

Dit werkt prima in IE6 en IE7, echter, in FF2 en FF3 krijg ik de melding van firebug dat this.event geen properties heeft. En dan kan er natuurlijk niet veel gedaan worden.

Omdat ik de site wel crossbrowsercompliant wil hebben in iig IE6/7 en FF2/3 ben ik op zoek naar een manier om wel de value uit te kunnen lezen en die naar een uppercase te zetten.

Nu kan ik het doen dmv een specifiek ID meegeven aan de functie als argument, maar gezien ik de functie op meerdere velden wil aanroepen zou ik het geheel liever wat generieker houden, zodat er minder makkelijk fouten in kunnen komen.

Ik ben dus naar een manier op zoek om in firefox te kijken in de functie door welk element de onchange is getriggerd, dat element op te pakken en die value aan te passen (wat ik dus in IE wel kan). Nu heb ik zitten zoeken naar de eventhandler van Firefox, maar ben nog geen oplossing tegengekomn om het op deze manier te doen (alleen via het doorsturen van een id als argument), dat kan ik alsnog doen mocht niet mogelijk blijken, maar ik houd de code liever zo generiek mogelijk.

Heeft iemand enig idee op welke manier ik het element kan aanspreken en de ingevulde value op deze manier op kan pakken. Logischerwijs zou ik zeggen dat het met 'this' of met 'self' werkt, alleen die returnen niet het element, maar de window.

dinsdag 22 januari 2008 14:54

Acties:

Sebazzz

3dp

HTML:

<input type="text" id="voorletters" name="voorletters" onchange="allUpperCase(this.event);">

<script>
function allUpperCase(e){
e.srcElement.value = e.srcElement.value.toUpperCase();
}
</script>

Dus wel/niet zoiets?

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

dinsdag 22 januari 2008 15:01

Acties:

TERW_DAN

Met een hamer past alles.

Topicstarter

Sebazzz schreef op dinsdag 22 januari 2008 @ 14:54:

HTML:

<input type="text" id="voorletters" name="voorletters" onchange="allUpperCase(this.event);">

<script>
function allUpperCase(e){
e.srcElement.value = e.srcElement.value.toUpperCase();
}
</script>

Dus wel/niet zoiets?

Als het zou werken dan zou ik dit op zich een prima oplossing vinden (daar ik generiek dingen meegeef), echter, firebug verteld doodleuk dat e geen properties heeft en ik kan dus geen value van het element vinden.

dinsdag 22 januari 2008 15:29

Acties:

Bozozo

Your ad here?

de oude
e = e || window.event;
var targ = e.target || e.srcElement;
truc?

TabCinema : NiftySplit

dinsdag 22 januari 2008 15:34

Acties:

BtM909

Watch out Guys...

Heeft iemand enig idee op welke manier ik het element kan aanspreken en de ingevulde value op deze manier op kan pakken. Logischerwijs zou ik zeggen dat het met 'this' of met 'self' werkt, alleen die returnen niet het element, maar de window.

Ehm gewoon verwijzen naar this gaat werken zoals onderstaand hoor

HTML:

1	<input type="text" id="voorletters" name="voorletters" onchange="allUpperCase(this);">

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 22 januari 2008 15:45

Acties:

Sebazzz

3dp

de oude
e = e || window.event;
var targ = e.target || e.srcElement;
truc?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">



        <title>Tekst in tekstveld zou in HOOFDLETTERS moeten gaan</title>

        

        <!-- Globale javascript -->
        <script type="text/javascript">
            function allUpperCase(evt){
                var evt = evt || window.event; // event object
                var target = evt.target || window.event.srcElement; // event target
                var targetID = document.getElementById(target.getAttribute("id")); // event target id
                targetID.value = targetID.value.toUpperCase();
            }
            
            window.onload = function() {
                document.getElementById("voorletters").onchange = function(evt) { allUpperCase(evt) };
            }
        </script>
        

    </head>

    <body>
        <form>

            <input type="text" id="voorletters" name="voorletters">
        </form>

    </body>

</html>

Oud maar vertrouwd. Het werkt.

Ehm gewoon verwijzen naar this gaat werken zoals onderstaand hoor

Hij wil geloof ik alleen met event objecten werken.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

dinsdag 22 januari 2008 16:25

Acties:

Bozozo

Your ad here?

@Sebazz
var targetID = document.getElementById(target.getAttribute("id"));
Wat wil je hiermee bereiken? targetID is met deze code precies hetzelfde object als target, dus dat hele regeltje kun je schrappen.

TabCinema : NiftySplit

dinsdag 22 januari 2008 17:54

Acties:

Sebazzz

3dp

Daar wil ik niks mee bereiken maar ik had het voor iets te testen erin gezet.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

dinsdag 22 januari 2008 18:16

Acties:

frickY

HTML:

<input type="text" id="voorletters" name="voorletters" onchange="allUpperCase(this);">

<script>
function allUpperCase(elem){
elem.value = elem.value.toUpperCase();
}
</script>

Werkt in mijn ervaring altijd en overal.

[ Voor 18% gewijzigd door frickY op 22-01-2008 18:16 ]