Bookmarklet funktioniert manchmal nicht

[skeeve]

Moin!

Ich habe ein bookmarklet, daß mir alle <input type="password"...> in type text wandeln soll. Zusätzlich speichere ich in einem Attribut des Elements die alten style Daten um sie beim zweiten Aufruf des Bookmarklets zurück zu setzen.

Hier erstmal das Script:

javascript:var inp=document.getElementsByTagName('input');  
for (var i in inp) {  
	try {  
		if (inp[i].type == "password") {  
			inp[i].setAttribute("was_password", inp[i].style.backgroundColor + ":" + inp[i].style.color);  
			inp[i].type= "text";  
			inp[i].style.backgroundColor= "red";  
			inp[i].style.color= "yellow";  
		}  
		else if (inp[i].getAttribute("was_password") != null) {  
			inp[i].type="password";  
			var old= inp[i].getAttribute("was_password").split(":");  
			inp[i].style.backgroundColor= old[0];  
			inp[i].style.color= old[1];  
			inp[i].removeAttribute("was_password");  
		}  
	}  
	catch (e) {}  
}  
void(0);

Meistens funktionierts, aber auf einigen Seiten nicht und ich verstehe einfach nicht, warum.

Zum Beispiel funktioniert es auf http://www.perlmonks.org nicht aber auf z.B. GMX' Login Seite oder auf http://forum.de.selfhtml.org/usermanagement/register.php?for=forum

Habt Ihr irgendwelche hilfreiche Tipps für mich?

Ich verwende momentan FF26 auf WinDOS7

[skeeve]

Ich denke, ich weiß jetzt, warum es nicht immer klappt.

Es scheint so, als ob einige der password Felder, nachdem ich sie zu text Feldern gewandelt habe, "hinten" nochmal auftauchen und zurückgesetzt werden. Ich hatte zuerst den Attribut-Kram in Verdacht und habe deswegen das zuerst umgestellt.

Nachdem das auch nicht geklappt hatte, kam mir langsam der Verdacht und jetzt sieht mein Bookmarklet so aus:

javascript:var inp=document.getElementsByTagName('input');  
var pwd=0;  
for (var i in inp) {  
	if (inp[i].type == "password") {  
		inp[i].type= "text";  
		inp[i].title= inp[i].title + "\u0000"+inp[i].style.backgroundColor+"\u0000"+inp[i].style.color;  
		inp[i].style.backgroundColor= "red";  
		inp[i].style.color= "yellow";  
		++pwd;  
	}  
}  
if (pwd==0) for (var i in inp) {  
	if (inp[i].type == "text" && inp[i].title.indexOf("\u0000") >= 0) {  
		var info = inp[i].title.split("\u0000");  
		console.log(inp[i].title.indexOf("\u0000"));  
		inp[i].style.backgroundColor= info[info.length-2];  
		inp[i].style.color= info[info.length-1];  
		inp[i].title = inp[i].title.substr(0,  
		inp[i].title.length  
		-info[info.length-2].length  
		-info[info.length-1].length  
		-"\u0000\u0000".length);  
		inp[i].type = "password";  
	}  
}  
void(0);

[skeeve]

Ups... Kleiner Fehler... Das war nicht die neueste Version.

Statt nochmal zu posten, Schaut hier: http://tw5magick.tiddlyspot.com und sucht nach "Reveal Passwords Bookmarklet" - man kann leider noch nicht direkt verlinken.

[bubble]

Habt Ihr irgendwelche hilfreiche Tipps für mich?

var inp=document.getElementsByTagName('input');  
for (var i in inp) {  
	try {  
		if (inp[i].type == "password") {  
			inp[i].setAttribute("was_password", inp[i].style.backgroundColor + ":" + inp[i].style.color);  
			inp[i].type= "text";  
			inp[i].style.backgroundColor= "red";  
			inp[i].style.color= "yellow";  
		}  
		else if (inp[i].getAttribute("was_password") != null) {  
			inp[i].type="password";  
			var old= inp[i].getAttribute("was_password").split(":");  
			inp[i].style.backgroundColor= old[0];  
			inp[i].style.color= old[1];  
			inp[i].removeAttribute("was_password");  
		}  
	}  
	catch (e) {}  
}  
void(0);

Ich hab mal deinen aktuellen Post hier gepostet, damit nich jeder auf die Seite gehen muss, nach deinem Script suchen muss nur um zu sehen worauf ich mich beziehe.

Was IMO unschön ist, ist, dass immer alle Passwort-Felder umgeschalten werden, das du invalide Attribute benutzt und inline-style-Angaben.

Da dachte ich mir ein Button neben jedem togglebarem Passwort-Feld der nur für das eine Feld funktioniert wäre besser, statt ein invalides Attribut zu benutzen um sich die alten inline-style-Angaben zu merken, sie sich einfach gar nicht merken und statt inline-styles einfach ein style-Element & eine Klasse zu benutzen:

// creates and attaches a new style element (inline styles are crap!)  
var style = document.createElement("style");  
style.innerText = "input.pwd-visible { \n\tbackground-color: #f00 !important;\n\tcolor: #ff0 !important;\n }";  
document.getElementsByTagName("head")[0].appendChild(style);  
  
// this is the event handler for the buttons  
var event_handler = function() {  
	var was_pwd_before = this.related_input.type === "password";  
	this.related_input.type = was_pwd_before ? "text" : "password";  
	this.innerText = was_pwd_before ? "hide" : "show";  
	this.related_input.classList.toggle("pwd-visible");  
};  
  
// creation of the buttons for each password typed input element  
var list = document.querySelectorAll("input[type=password]");  
for(var i = 0; i < list.length; i++) {  
	// create new button element  
	var btn = document.createElement("button");  
	btn.type = "button";  
	btn.innerHTML = "show";  
	btn.addEventListener("click", event_handler);  
	  
	// attach the input field as buttons property and insert the button behind the input field  
	var input = list[i];  
	btn.related_input = input;  
	input.parentNode.insertBefore(btn, input.nextSibling);  
}

MfG
bubble

[Skeeve]

Danke, daß Du das gemacht hast. Dadurch ist mir aufgefallen, daß, warum auch immer, meine wirkliche aktuelle Lösung, gar nicht gespeichert wurde :(

Deine Idee gefällt mir auch ganz gut, ich ziehe aber dennoch meine Minimallösung für meine Anwendungsfälle vor.

1. Ich muß nur einmal Klicken
2. Ich habe bisher noch nie den Fall gehabt, mehr als 1 Passwort Feld zu haben - außer bei Passwordänderungen.
3. Inline Styles sind PFUI! Genau! Und darum nehme ich sie auch, weil mein Script auch PFUI ist ;)

[bubble]

Deine Idee gefällt mir auch ganz gut, ich ziehe aber dennoch meine Minimallösung für meine Anwendungsfälle vor.

Ich hab irgendwie überlesen, dass es ein Bookmarklet ist. Wenn man Greasemonkey oder entsprechendes Add-on für deinen Browser benutzen würde, fällt

1. Ich muß nur einmal Klicken

weg, da es generell ausgeführt wird und der Vorteil wäre, dass du generell gerade den Fokus auf das Passwort-Feld hast, bzw. generell grad da hin starrst und der Button wär halt gleich daneben.

2. Ich habe bisher noch nie den Fall gehabt, mehr als 1 Passwort Feld zu haben - außer bei

Passwordänderungen.
Spontan fällt mir gerade bitbucket.org ein, da hab ich beim Login auch noch ein Registrierungsformular. Wenn du also dein Passwort gespeichert hast, füllt der Browser sowohl Login- als auch Registrierungsformular aus.

Bei deinem Script sieht man das Passwort dann 2 mal, bei meinem nicht.

3. Inline Styles sind PFUI! Genau! Und darum nehme ich sie auch, weil mein Script auch PFUI ist ;)

Aber.... aber .... Nein! >.<

MfG
bubble

[Skeeve]

Moin!

Ich hab irgendwie überlesen, dass es ein Bookmarklet ist. Wenn man Greasemonkey oder entsprechendes Add-on für deinen Browser benutzen würde, fällt

1. Ich muß nur einmal Klicken
   weg, da es generell ausgeführt wird und der Vorteil wäre, dass du generell gerade den Fokus auf das Passwort-Feld hast, bzw. generell grad da hin starrst und der Button wär halt gleich daneben.

D.h. ich brauche eine GreaseMonkey Alternative für Safari auf meinem OS X und dem Uralt IE auf dem Arbeitslaptop... Wobei bei letzterem dann noch die Frage ist, ob ich das überhaupt installieren darf/kann so ohne Admin Rechte.

Bei deinem Script sieht man das Passwort dann 2 mal, bei meinem nicht.

Das kann man als Vorteil, aber auch als Nachteil sehen.

3. Inline Styles sind PFUI! Genau! Und darum nehme ich sie auch, weil mein Script auch PFUI ist ;)
   Aber.... aber .... Nein! >.<

Nein... Doch... Ohhh! http://www.youtube.com/watch?v=W42x6-Wf3Cs

Ich bilde mir einfach ein, daß auf guten, modernen Webseiten keine Inline Styles mehr verwendet werden und ich damit dann weniger Konflikte provoziere.

-- Skeeve