Password -> Text -> Password (Compatibiliteitsprobleem IE)

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Ik ben met een registratie pagina bezig voor een bepaalde applicatie. Terwijl ik aan het testen was, stuitte ik op een probleempje. Ik heb namelijk een invulveld voor een wachtwoord. Nu wil ik dat het mogelijk is, om met behulp van een link de tekens in dat veld toch te laten zien.

Dit is de code die ik heb en prima werkt in FF maar niet in IE.
HTML: 
<input type="password" name="password" class="userinput" id="pass"> 
<a href="javascript:pass_text('pass')" id="pass_link" class="eLink">
Toon Wachtwoord
</a>

Het script dat hierbij hoort is het volgende:

HTML: 
<script type="text/javascript">
	function pass_text(target){
		var obj = document.getElementById('pass');
		var link = document.getElementById('pass_link');
		var type;
		if(target != 'hide'){
		/*obj.setAttribute('type', 'text');	*/
		obj.type = 'text';
		link.href = 'javascript:pass_text("hide")';
		link.innerHTML = 'Verberg Wachtwoord';
	  } else {
	  /*obj.setAttribute('type', 'password');*/
	  obj.type = 'password';
		link.href = 'javascript:pass_text("show")';
		link.innerHTML = 'Toon Wachtwoord';
	  }
}
</script>

Zoals je kunt zien heb ik het eerst al met obj.setAttribute geprobeerd en daarna met obj.type = .

Maar ze werken allebei in FF maar geen van beide in IE(8). Die geeft namelijk de volgende error:

Code: 
Webpage Script Errors

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; InfoPath.2)
Timestamp: Wed, 16 Jul 2008 16:10:38 UTC

0.
Message: This command is not supported.
Line: 88
Char: 3
Code: 0
URI: http://localhost/BisiBee/registreer.php

Nu begrijp ik wel dat het commando dat ik geef niet ondersteund wordt, maar wat kan ik eraan doen om toch tot dezelfde functionaliteit te komen?


EDIT: Ik las op een ander forum dat het helpt om de attributen met hoofdletters te typen. Dus dat heb ik geprobeerd. De error is weg, maar het werkt nog steeds niet in IE.
 
Laatst bewerkt:
Ik zou er bij die <a> een onclick van maken, in plaats van het in de href te zetten. Het is namelijk geen link, maar een functieaanroep.
 
daar heb je gelijk in. Maar dat zou toch niet uit mogen maken voor de functionaliteit. Ik ga het nu niet proberen, maar als ik geslapen heb, ga ik het wel proberen.
 
Tuurlijk maakt dat wel uit, je kunt niet overal zomaar alles neerzetten. Ik weet niet of het de oplossing is, maar ik weet wel dat het fout is.
 
Helaas, dat werkt ook niet in IE. Als jij dit zou moeten maken, welke code zou jij dan gebruiken? Misschien doe ik wel veel te moeilijk.
 
Ik zou het niet weten, wat je precies wilt gebruiken is mij namelijk nog steeds een raadsel.
 
Wat ik probeer te realiseren is het volgende:

In plaats van 2 invulvelden om je wachtwoord in te typen, zodat je zeker weet dat je het goede hebt, wil ik het voor de gebruiker mogelijk maken om het wachtwoord 'gewoon' weer te geven. En daarna ook weer terug te switchen.
 
Aaah, bedoel je het zo. Dan heb je een flink pakket onnodige scripts geschreven. ;)

Ik ben tot het volgende gekomen, werkt in alle browsers (behalve de oudere browsers die de getElementById() nog niet kennen, maar ja..):

HTML: 
<html>
	<head>
	<script type="text/javascript">
	
	function showPassword(password, checkbox){
	
		if(checkbox == true){
		
			document.getElementById('wachtwoord').style.visibility = 'visible';
			document.getElementById('wachtwoord').innerHTML = password;
			
		}
	}
		
	function showHideDiv(checkbox, password){
		
		if(checkbox == false){
		
			document.getElementById('wachtwoord').style.visibility = 'hidden';
		
		}else{
		
				document.getElementById('wachtwoord').style.visibility = 'visible';
				document.getElementById('wachtwoord').innerHTML = password;
				
		}
	}
	
	</script>
	
	<body>
	
	<form>
		Wachtwoord laten zien? <input type="checkbox" id="show" onclick="showHideDiv(this.checked, document.getElementById('password').value)"/><br />
		Wachtwoord <input type="password" id="password" onkeyup="showPassword(this.value, document.getElementById('show').checked)"><br />
	</form>
	
	<div id="wachtwoord" style="visibility:hidden;"></div>
	
	</body>
</html>

Succes!
 
Geweldig! Het doet niet exact wat ik wil, dat hij het wachtwoord in het invulveld laat zien, maar ik denk dat ik het wel ga gebruiken!

SvU, hartelijk bedankt!
 
Oh, da's weer wat anders ja. Zou ik persoonlijk niet doen, maar valt wel te fiksen denk ik, hehe.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan