[XHTML] Leeg textveld als je er in klikt

[MavhRik]

Hey,

Ik ben voor school een website aan het maken (project) samen met andere, maar ik ben verantwoordelijk voor de lay-out.

Nu hebben we een login'scherm' met onderstaande form, echter wil ik als je in het vak van Gebruikersnaam klikt, dat deze wordt geleegd van inhoud... nu moet je namelijk eerst de text die er in staat verwijderen (zelfde geld voor wachtwoord).

Wegens ruimte gebrek kunnen we niet de text Gebruikersnaam en Wachtwoord ergens anders kwijt.

Ik heb gezocht op internet maar kan niets vinden...

Iemand ideetje?

code:

<form method='post' action='login.php?action=1'>
            <input type='hidden' name='step' />
                    <table>
                    <tr>
                        <td>
                            <input class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />
                        </td>
                        <td>
                            <input class='authenticationinput' type='password' name='passwords' value='Wachtwoord' size='15' />
                        </td>
                        <td>
                            <input class='authenticationinput' type='submit' value='Inloggen' />
                        </td>
                    </tr>
                </table>
            </form>

[Erkens]

zoiets heb ik laatst ook gedaan, maar dan voor een search field:

JavaScript:

function quickSearchFocus(e){
  var el = document.getElementById('qsInput');
  if (el.value=='<search>'){
    el.value = '';
  }
}

function quickSearchBlur(e){
  var el = document.getElementById('qsInput');
  if (el.value==''){
    el.value='<search>';
  }
}

document.getElementById('qsInput').onfocus = quickSearchFocus;
document.getElementById('qsInput').onblur = quickSearchBlur;

doe er je voordeel mee

[André]

code:

<input onfocus='if (this.value == "Gebruikersnaam") { this.value = ""; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />

Was dit nou echt niet te vinden?

[MavhRik]

André schreef op woensdag 22 juni 2005 @ 14:08:

code:

<input onfocus='if (this.value == "Gebruikersnaam") { this.value = ""; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />

Was dit nou echt niet te vinden?

Nope... mischien dat ik de verkeerde queuries gebruik...

Maar thnx! Ik ga het meteen uitproberen...

[Erkens]

André schreef op woensdag 22 juni 2005 @ 14:08:

code:

<input onfocus='if (this.value == "Gebruikersnaam") { this.value = ""; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />

Was dit nou echt niet te vinden?

zelf heb ik altijd liever een scheiding tussen de HTML weergave en "extra'tjes" zoals dit

tevens nog een tip voor de topicstarter: ondanks dat je er geen ruimte voor hebt voeg er toch een label aan toe, welke je dan hide in je css, op deze manier is het toch nog duidelijk wat het voorstelt etc

[MavhRik]

Hmmm, wil nie werken... Ik heb alle " moeten vervangen door ' anders gaat de site over ze nek... (PHP...) iemand een oplossing?

Ik heb geen verstand van PHP... Hieronder staat iets meer code en zoals het nu is, maar het leeg maken van het vak dus nog niet werkt

code:

if(!isset($action))
        {
            echo"<form method='post' action='login.php?action=1'>
            <input type='hidden' name='step' />
                    <table>
                    <tr>
                        <td>
                            <input onfocus='if (this.value == 'Gebruikersnaam') { this.value = ''; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />
                        </td>
                        <td>
                            <input onfocus='if (this.value == 'Wachtwoord') { this.value = ''; }' class='authenticationinput' type='password' name='passwords' value='Wachtwoord' size='15' />
                        </td>
                        <td>
                            <input class='authenticationinput' type='submit' value='Inloggen' />
                        </td>
                    </tr>
                </table>
            </form>";
        }
        elseif( $action == '1')
        {
                                 ....................

[Erkens]

tja dat krijg je als je op die manier PHP gebruikt, dan moet je escapen
Waarom geef je dat element niet gewoon een id, en gebruik je een stukje javascript zoals ik gaf (na wat aanpassingen natuurlijk) ?

[Zoefff]

inVision schreef op woensdag 22 juni 2005 @ 15:09:
Hmmm, wil nie werken... Ik heb alle " moeten vervangen door ' anders gaat de site over ze nek... (PHP...) iemand een oplossing?

Dat gaat niet werken, je moet ze dan even escapen.

PHP:

echo "<input onfocus='if (this.value == \"Gebruikersnaam\") { this.value = \"\"; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />";

Zo dus

[Osiris]

Dit mag natuurlijk absoluut niet:

code:

<input onfocus='if (this.value == 'Gebruikersnaam') .......

Door de ' voor Gebruikersnaam sluit je immers de ' die je geopent hebt na onfocus=..

[MavhRik]

Zoefff schreef op woensdag 22 juni 2005 @ 15:15:
[...]

Dat gaat niet werken, je moet ze dan even escapen.

PHP:

echo "<input onfocus='if (this.value == \"Gebruikersnaam\") { this.value = \"\"; }' class='authenticationinput' type='text' name='firstname' value='Gebruikersnaam' size='15' />";

Zo dus

YES! Het werkt! Thnx

Erkens... ik denk dat ik voor jouw oplossing te weinig kennis van JS heb, aangezien ik er niets van snap

[djluc]

Zoiets is handiger, dit werkt met alle velden die je maar wilt checken zonder dat je de standaardwaarden e.d. mee moet geven.

HTML:

<html>
    <head>
        <script type="text/javascript">
        function clearField(fieldID) {
            if(document.getElementById(fieldID).value==document.getElementById(fieldID).defaultValue) {
                document.getElementById(fieldID).value='';
                return true;
            }else{
                return false;
            }
        }
        </script>
    </head>
    <body>
        <input type="text" value="ditIsStandaard" id="testInput" onfocus="javascript:clearField('testInput');">
    </body>
</html>

Het enige wat je dus doet is:
1. Je plakt het stukje JavaScript tussen de <head> tags van je pagina.
2. Je geeft het veld een id, zoals in het voorbeeld testInput
3. Je plakt overal het stukje onfocus="javascript:clearField('testInput');" bij je velden.

[ Voor 29% gewijzigd door djluc op 22-06-2005 15:28 ]

[Erkens]

inVision schreef op woensdag 22 juni 2005 @ 15:20:
Erkens... ik denk dat ik voor jouw oplossing te weinig kennis van JS heb, aangezien ik er niets van snap

kennis van JS heb je niet nodig voor de aanpassingen die je moet maken op mijn script
alleen de naam van het ID dat je gebruikt en eventueel de tekst "<search>"
(owja, en het is handig als je die functienamen aanpast, hoewel dat niet noodzakelijk is)
Het werkt gewoon handiger als je alle events afhandeld op een plek waar dat hoort, dus niet in je weergave

[MavhRik]

djluc, nu snap ik het :-)

[crisp]

please, gebruik geen javascript: in een eventhandler; het is geen URL...

Overigens heeft het antwoord altijd al op deze pagina gestaan:

code:

onfocus="if(this.value=='Zoeken')this.value='';else this.select()"

quicksearch

[ Voor 57% gewijzigd door crisp op 22-06-2005 15:49 ]

[Osiris]

crisp schreef op woensdag 22 juni 2005 @ 15:47:
please, gebruik geen javascript: in een eventhandler; het is geen URL...

Hoewel bovenstaande natuurlijk niet correct is, is het denk ik beter dan niets..

Je moet de default script-language ergens immers setten..:

quote: http://www.w3.org/TR/html...ml#idx-scripting_language

As HTML does not rely on a specific scripting language, document authors must explicitly tell user agents the language of each script. This may be done either through a default declaration or a local declaration.

Bijvoorbeeld door dit op te nemen in je Apache-configuratie:

code:

<IfModule mod_headers.c>
  Header add Content-Script-Type "text/javascript"
</IfModule>

Of in je HTML-document:

HTML:

<META http-equiv="Content-Script-Type" content="text/javascript">

Beide dingen ben ik eigenlijk nog nooit tegengekomen

[crisp]

een eventhandler mag alleen scriptdata bevatten. Een protocol-aanduiding is geen scriptdata, en ook geen content-type aanduiding

[Osiris]

crisp schreef op woensdag 22 juni 2005 @ 16:10:
een eventhandler mag alleen scriptdata bevatten. Een protocol-aanduiding is geen scriptdata, en ook geen content-type aanduiding

Mjah, klopt ook wel, maar aangezien ik die dingen die ik net quote nog nooit ergens gezien heb lijkt het mij niet meer dan logisch om te denken dat alle intrinsic events in een HTML-document sowieso ongeldig zijn, aangezien er dus geen manier is waarop de client weet hoe ie 't moet uitvoeren. Dus aangezien het toch al fout is, dan is het handiger om de browser toch nog een beetje te helpen met zijn script-keuze.
Uiteraard moet je gewoon de Content-Script-Type setten of geen intrinsic events gebruiken, maar da's niet iedereen even duidelijk