Skift input-type ved aktiv

Nej, det kan du desværre ikke. Har selv haft samme problem.

Men du kan lave et falsk dummy-felt, hvori der står "Kodeord:", og når du klikker på det skjules det, og det rigtige passwordfelt vises i stedet!

Du kan nemlig ikke skifte type med JavaScript grundet sikkerhed.

F.eks.:

<input id="dummypassword" type="text" value="Kodeord:" onfocus="this.style.display='none';document.getElementById('password').style.display='inline';document.getElementById('password').focus()">
<input id="password" style="display:none" type="password">

Og sådan her, hvis det skal være lidt mere overskueligt, og "Kodeord:"-teksten skal vises igen, hvis der ikke indtastes noget i password-feltet.

<script type="text/javascript">
function passwordToggle(oHide,oShow){
    oHide.style.display='none';
    oShow.style.display='inline';
}
</script>

<input id="dummypassword" type="text" value="Kodeord:" onfocus="passwordToggle(this,document.getElementById('password'));document.getElementById('password').focus()">
<input id="password" style="display:none" type="password" onblur="if(this.value==='')passwordToggle(this,document.getElementById('dummypassword'))">

Dit første eksempel virker super. Nu kunne det være smart at der stod "Kodeord:" igen når feltet ikke længere er aktivt. Jeg har ikke mulighed at indsætte javascripts på siden - så alt skal ligesom foregå "inline", som eksempel 1. Er det muligt?

F.eks.:

<input id="dummypassword" type="text" value="Kodeord:" onfocus="this.style.display='none';document.getElementById('password').style.display='inline';document.getElementById('password').focus()">
<input id="password" style="display:none" type="password" onfocus="if(this.value==='')this.style.display='none';document.getElementById('dummypassword').style.display='inline'">

Hov, sådan her:

<input id="dummypassword" type="text" value="Kodeord:" onfocus="this.style.display='none';document.getElementById('password').style.display='inline';document.getElementById('password').focus()">
<input id="password" style="display:none" type="password" onblur="if(this.value===''){this.style.display='none';document.getElementById('dummypassword').style.display='inline'}">

Jeg kan ikke få dit seneste eksempel til at fungere her (IE.) :-|

Prøv den i stedet. =)

Den er testet.

Ja, det virker super :-) Så kan det være du kan fortælle mig, hvorfor Firefox og IE behandler styles på det forskelligt. Eksempel: http://proads.dk/simon/input_exp.html

Og så er der vist point til dig :-)

Tak for point! :)

Altså IE og FF er jo 2 forskellige stykker software, som er bygget på forskellige måder og derfor også tolker ting forskelligt. =)

Derudover synes jeg nu, at dit link ser ens ud i IE7 og FF3 - lige bortset fra skriften, som du jo heller ikke har defineret i din kode og derfor tolkes forskelligt.

Der er slet ingen style på kodeords-input'et i Firefox her. Og jeg tester i 3.0. Og generelt har jeg ikke haft problemer med input-felter i Firefox / IE før.

Siger fejlkonsollen noget hos dig?

Underligt. Det hele foregik i en form (of course ;-)), men ved at gøre en af input'ene aktive forskubbede IE feltet 5px til venstre. Ved at tilføje en float: left stoppede fjollerierne. Okay, skod browser ;-) Tak for hjælpen.

Så lidt. =)

Well, jeg skal bruge din hjælp igen. Skal du have nogle point for det, så sig til ;-)
Se: http://www.pointshop.dk/join/?offer=vind_en_rejse&adVariantId=48

Koden bag:

    <!-- Top -->
<div style="background: url(http://pointshop.dk/images/pointshop_vindenrejse_top_dk.png); height: 469px; width: 655px; float: left;"></div>

<!-- Opret -->
<div style="background: url(http://pointshop.dk/images/pointshop_vindenrejse_opret_dk.gif); height: 195px; width: 412px; float: left; margin: 0 0 0 15px;">

<form style="margin: 0; padding: 0;" action="">
<span style="display: block; margin: 65px 0 0 16px;">

<input type="text" name="email" id="email" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; margin: 0;" value="Email adresse:" onfocus="if(this.value == 'Email adresse:') this.value = '';" onblur="if(this.value == '') this.value = 'Email adresse:';"><br>

<input id="password1" type="text" value="Ønsket adgangskode:" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; float: left; margin: 4px 0 0 0;" onfocus="this.style.display='none';document.getElementById('password').style.display='inline';document.getElementById('password').focus()">
<input id="password" name="password" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; display: none; margin: 4px 0 0 0; float: left;" type="password" onblur="if(this.value===''){this.style.display='none';document.getElementById('password1').style.display='inline'}">

<input id="password3" type="text" value="Bekræft adgangskode:" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; float: left; margin: 4px 0 0 0;" onfocus="this.style.display='none';document.getElementById('password2').style.display='inline';document.getElementById('password2').focus()">
<input id="password2" name="password2" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; display: none; margin: 4px 0 0 0; float: left;" type="password" onblur="if(this.value===''){this.style.display='none';document.getElementById('password3').style.display='inline'}">

<input type="image" src="http://pointshop.dk/images/pointshop_vindenrejse_submit_dk.gif" style="width: 133px; height: 87px; margin: -55px 0 0 10px; float: left; display: inline; padding: 0; border: 0;">

</span>
</form>
</div>

<!-- Sticker -->
<img src="http://pointshop.dk/images/pointshop_vindenrejse_sticker_dk.gif" height="195" width="211" style="float: left;"><br>

<!-- Bund -->
<img src="http://pointshop.dk/images/pointshop_vindenrejse_divider.gif" height="2" style="margin: 5px 0 0 14px;" width="623">
<span style="color: #999; display: block; width: 623px; margin: 7px 0 0 14px;">Dette oprettelsestilbud gælder kun hvis ovenstående formular på denne side benyttes. Tilbuddet gælder kun nye brugere. <strong>Tilbuddet er 100% gratis.</strong> Samtidigt deltager du i lodtrækningen af et rejsegavekort på 10.000 kr. til hotel og fly. Vi udtrækker den heldige vinder af rejsen d. 2. marts 2009, hvilket bliver annonceret på forsiden af PointShop.<br><br><span style="color: #000;">Lyst til at vide mere om PointShop.dk? <a href="http://www.pointshop.dk/helpdesk/about.asp">Læs mere her</a></span></span>

-- Felterne forsvinder i IE? Er det noget jeg har gjort galt?

Jeg synes, jeg ser felterne fint? Dog er passwordfeltet fyldt med prikker og ikke tekst.

Felterne forsvinder her når de er aktive (Ønsket adgangskode og Bekræft adgangskode) og det er ikke kun et enkelt tilfælde her det er sket med. Jeg forstår sgu ikke hvad der er galt, det virker meget underligt.

Lyder lidt som om du har problemer på din computer. =)

Det er så åbenbart hele kontoret der har? ;-)

<input type="password" name="password" style="width:80px; margin: 2px 0 0 0;padding: 3px 3px 4px 3px;" id="password2" />

...

<input id="password2" name="password2" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; display: none; margin: 4px 0 0 0; float: left;" type="password" onblur="if(this.value===&#39;&#39;){this.style.display=&#39;none&#39;;document.getElementById(&#39;password3&#39;).style.display=&#39;inline&#39;}">

- Ikke 2x ens id ;)

:)

Well, jeg gider ikke bøvle med det mere. Bruger den 'gamle' metode istedet. Ellers tak for din hjælp :-)

<input id="password2" type="text" value="Bekræft adgangskode:" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; float: left; margin: 4px 0 0 0;" onfocus="this.style.display='none';document.getElementById('password2').style.display='inline';document.getElementById('password2').focus()">
<input id="password2" name="password2" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; display: none; margin: 4px 0 0 0; float: left;" type="password" onblur="if(this.value===''){this.style.display='none';document.getElementById('password2').style.display='inline'}">

- er den kode jeg bruger nu. Jeg ved ikke om vores system fortolker det anderledes end en 'normal' webside, men et eller andet går der galt. For feltet forsvinder når det er aktivt :-)

Før mente jeg at der stod

<input id="password3" type="text" value="Bekræft adgangskode:" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; float: left; margin: 4px 0 0 0;" onfocus="this.style.display='none';document.getElementById('password2').style.display='inline';document.getElementById('password2').focus()">
<input id="password2" name="password2" style="padding: 5px; width: 225px; background: #fff; border: 1px solid #ffba64; display: none; margin: 4px 0 0 0; float: left;" type="password" onblur="if(this.value===''){this.style.display='none';document.getElementById('password3').style.display='inline'}">

jvf. 25/08-2008 14:55:26.

...

Problemet med de 2x id="password2" er at der i toppen af body's html står følgende:
<body>




<div id="controlBar">
    <div id="controlBarMain">
   
        <!-- offline -->
          <div class="logOn">
       
  <form method="post" action="http://www.pointshop.dk/login_doit.asp?doPost=true">

  <label>
  <label for="email2">Email: </label><input type="text" name="email" style=" margin: 4px 0 0 0; padding: 3px 3px 4px 3px;" value="" id="email2" />
  </label>
  <label>
  <label for="password2">Adgangskode: </label><input type="password" name="password" style="width:80px; margin: 2px 0 0 0;padding: 3px 3px 4px 3px;" id="password2" />

^ - Læg mærke til id="password2" til sidst.

Du kan så enten skifte id på den ene eller den anden og så rette id referencerne til.

Arh okay, det var lige en smutter. Jeg ser lige om det ikke kan ændre noget. Tak for tippet ;-)

Men jeg kan da absolut anbefale w13s eksempel i 25/08-2008 13:28:59, måske tilpasset, så inline-koden kan skrives lidt kortere:

<script type="text/javascript">
function passwordToggle(oHide,oShow){
    oHide.style.display='none';
    if(typeof oShow == "string")
      oShow = document.getElementById(oShow);
    oShow.style.display='inline';
    return oShow;
}
</script>

<input id="dummypassword" type="text" value="Kodeord:" onfocus="(passwordToggle(this,'password')).focus();">
<input id="password" style="display:none" type="password" onblur="if(this.value==='')passwordToggle(this,'dummypassword');">