8 votes

Transformer JavaScript en signet ou en bookmarklet ?

J'ai créé un script qui affiche les mots de passe au survol, tout comme Windows 8 au clic de l'œil.

J'ai créé cette fonctionnalité à l'aide de JavaScript avec le code suivant.

function text(){this.type="text"}function password(){this.type="password"}function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}}addHandlers()

Désolé pour le code JavaScript trop volumineux, mais je veux créer un signet ou un bookmarklet qui exécute ce script...

J'ai essayé :

javascript:(mycode);

Mais cela n'a pas fonctionné...

10voto

humanityANDpeace Points 692

Pour résoudre votre problème spécifique, j'ai réussi à faire en sorte que votre code JavaScript s'exécute sans erreur dans cette version :

javascript:(function(){function text(){this.type="text"};function password(){this.type="password"};function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}};addHandlers();alert("bookmarklet loaded");})();

Pour voir si votre code fonctionne, j'ai ajouté un alert("bookmarklet loaded"); à la fin du bookmarklet. Vous pouvez donc essayer et devriez - puisque j'ai testé sur Firefox 17 - voir apparaître une boîte de message. Je ne peux pas dire si votre code fonctionne ou non, mais ce n'était évidemment pas la question.

Il y a certaines choses que vous pouvez garder à l'esprit ou transformer le code JavaScript au sein de l'entreprise. <script></script> balises plus faciles à adopter pour un bookmarklet

  • Dans le code JavaScript normal, une nouvelle ligne peut séparer deux commandes. Les signets étant sur une seule ligne, il convient de remplacer le saut de ligne par un point-virgule. ; .

Un exemple ici

Prenons un exemple. Prenons deux extraits de code source avec deux instructions :

var anumber=1
var atext="hallo"

Si on les met tous sur une seule ligne (= remplacer les sauts de ligne par des espaces blancs), on obtient d'abord ceci :

var anumber=1 var atext="hallo"

Il ne s'agit plus d'un code JavaScript valide. Si vous voulez combiner deux instructions dans une ligne, vous devez séparer/délimiter les deux instructions en utilisant un point-virgule comme ceci :

var anumber=1; var atext="hallo"
  • Enveloppez tout votre code dans ce genre de fermeture :
    javascript:(function(){ [...here your code...] })();

Il existe un certain nombre de sites web qui permettent d'étudier la solution. Comme aquí .

6voto

marc.guenther Points 715

En fait, vous étiez tout près du but. Il faut juste que vous le disiez de cette façon :

javascript:(function(){mycode})();

Dans votre exemple, vous pouvez essayer ceci :

javascript:(function(){function text(){this.type="text"};function password(){this.type="password"};function addHandlers(){var e=false;var t=document.evaluate("//input[@type='password']",document,null,6,null);for(var n=t.snapshotLength-1,r;r=t.snapshotItem(n);n--){if(!e){r.addEventListener("mouseover",text,false);r.addEventListener("mouseout",password,false)}else{r.addEventListener("focus",text,false);r.addEventListener("blur",password,false)}}};addHandlers()})();

Veuillez prêter attention aux points-virgules lorsque vous minifiez votre code, il en manquait certains.

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X