web-dev-qa-db-fra.com

Comment masquer le mot de passe saisi via une invite de dialogue JavaScript?

Comment masquer le mot de passe saisi par un utilisateur dans une invite de dialogue en JavaScript? Par exemple, en utilisant quelque chose comme

var passwd = Prompt("Enter Password : ", "your password here");

Je voudrais que quand par exemple 12345 est entré, il apparaît comme ***** ou ..... dans la boîte de dialogue.

Quelqu'un peut-il suggérer comment je peux faire cela ou fournir un exemple de code?

javascriptpasswords
24
Prasath Mani

Recherchez-vous la fonction Prompt ?

var response = Prompt("What is your name?");

alert("Hello, " + response);

Le dialogue ressemblera à ceci:

enter image description here

Ce n'est probablement pas la meilleure façon d'obtenir une entrée de mot de passe, car cela ne masque pas l'entrée. Au lieu de cela, envisagez d'utiliser un formulaire HTML avec un champ de saisie de mot de passe. 

Peut-être cherchez-vous plutôt une authentification HTTP de base?

Vous pouvez définir cela en demandant à votre serveur Web d'envoyer quelques en-têtes; par exemple avec PHP:

<?php
if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="My Realm"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Text to send if user hits Cancel button';
    exit;
} else {
    echo "<p>Hello {$_SERVER['PHP_AUTH_USER']}.</p>";
    echo "<p>You entered {$_SERVER['PHP_AUTH_PW']} as your password.</p>";
}
?>

Cela entraînera le client pour afficher une boîte de dialogue comme ceci:

enter image description here

15
Dagg Nabbit

Vous ne pouvez pas masquer l'entrée avec une JavaScript window.Prompt()

Pensez à utiliser un dialogue de formulaire modal de l'interface utilisateur jQuery.

http://jqueryui.com/dialog/#modal-form

10
Moose Factory

Vous devez utiliser un élément d'entrée de type password dans un élément de formulaire:

<input name="myPass" id="myPass" type="password" />
6
Aram Kocharyan

Le seul moyen de bloquer la saisie d'un mot de passe est d'utiliser <input type="password">. Voici un exemple pour en faire une boîte de dialogue contextuelle:

/*
JavaScript Password Prompt by Luc ([email protected])
Originaly posted to http://stackoverflow.com/questions/9554987/how-can-i-hide-the-password-entered-via-a-javascript-dialog-Prompt
This code is Public Domain :)

Syntax:
password_Prompt(label_message, button_message, callback);
password_Prompt(label_message, button_message, width, height, callback);

Example usage:
password_Prompt("Please enter your password:", "Submit", function(password) {
    alert("Your password is: " + password);
});
*/
window.password_Prompt = function(label_message, button_message, arg3, arg4, arg5) {

    if (typeof label_message !== "string") var label_message = "Password:";
    if (typeof button_message !== "string") var button_message = "Submit";
    if (typeof arg3 === "function") {
        var callback = arg3;
    }
    else if (typeof arg3 === "number" && typeof arg4 === "number" && typeof arg5 === "function") {
        var width = arg3;
        var height = arg4;
        var callback = arg5;
    }
    if (typeof width !== "number") var width = 200;
    if (typeof height !== "number") var height = 100;
    if (typeof callback !== "function") var callback = function(password){};

    var submit = function() {
        callback(input.value);
        document.body.removeChild(div);
        window.removeEventListener("resize", resize, false);
    };
    var resize = function() {
        div.style.left = ((window.innerWidth / 2) - (width / 2)) + "px";
        div.style.top = ((window.innerHeight / 2) - (height / 2)) + "px";
    };

    var div = document.createElement("div");
    div.id = "password_Prompt";
    div.style.background = "white";
    div.style.color = "black";
    div.style.border = "1px solid black";
    div.style.width = width + "px";
    div.style.height = height + "px";
    div.style.padding = "16px";
    div.style.position = "fixed";
    div.style.left = ((window.innerWidth / 2) - (width / 2)) + "px";
    div.style.top = ((window.innerHeight / 2) - (height / 2)) + "px";

    var label = document.createElement("label");
    label.id = "password_Prompt_label";
    label.innerHTML = label_message;
    label.for = "password_Prompt_input";
    div.appendChild(label);

    div.appendChild(document.createElement("br"));

    var input = document.createElement("input");
    input.id = "password_Prompt_input";
    input.type = "password";
    input.addEventListener("keyup", function(e) {
        if (event.keyCode == 13) submit();
    }, false);
    div.appendChild(input);

    div.appendChild(document.createElement("br"));
    div.appendChild(document.createElement("br"));

    var button = document.createElement("button");
    button.innerHTML = button_message;
    button.addEventListener("click", submit, false);
    div.appendChild(button);

    document.body.appendChild(div);
    window.addEventListener("resize", resize, false);
};
3
Luc

Il n’existe actuellement aucun moyen de modifier la fonction Prompt() en JavaScript pour lui faire masquer la saisie de texte.

Au lieu de cela, nous devons créer une fenêtre contextuelle en HTML et l'afficher si nécessaire. J'ai créé un exemple minimaliste ici :

var promptCount = 0;
window.pw_Prompt = function(options) {
    var lm = options.lm || "Password:",
        bm = options.bm || "Submit";
    if(!options.callback) { 
        alert("No callback function provided! Please provide one.") 
    };

    var Prompt = document.createElement("div");
    Prompt.className = "pw_Prompt";

    var submit = function() {
        options.callback(input.value);
        document.body.removeChild(Prompt);
    };

    var label = document.createElement("label");
    label.textContent = lm;
    label.for = "pw_Prompt_input" + (++promptCount);
    Prompt.appendChild(label);

    var input = document.createElement("input");
    input.id = "pw_Prompt_input" + (promptCount);
    input.type = "password";
    input.addEventListener("keyup", function(e) {
        if (e.keyCode == 13) submit();
    }, false);
    Prompt.appendChild(input);

    var button = document.createElement("button");
    button.textContent = bm;
    button.addEventListener("click", submit, false);
    Prompt.appendChild(button);

    document.body.appendChild(Prompt);
};

pw_Prompt({
    lm:"Please enter your password:", 
    callback: function(password) {
        alert("Your password is: " + password);
    }
});

Il est fort probable que vous souhaitiez que ressemble ressemble à un pop-up. J'ai donc ajouté quelques CSS de base pour le faire ici:

.pw_Prompt {
    position:fixed;
    left: 50%;
    top:50%;
    margin-left:-100px;
    padding:15px;
    width:200px;
    border:1px solid black;
}
.pw_Prompt label {
    display:block; 
    margin-bottom:5px;
}
.pw_Prompt input {
    margin-bottom:10px;
}

Au total, vous obtenez cette démo

2
Zach Saucier

Une solution pour moi, construite à l'aide de ce qui précède et du didacticiel de http://bluebirdjs.com/docs/async-dialogs.html devait utiliser une fonction asynchrone. Parce que je voulais remplacer l'invite et sa logique. Malheureusement, je n'ai pas trouvé de solution plus simple, mais cela a fonctionné pour moi:

function passwordPrompt(text){
/*creates a password-Prompt instead of a normal Prompt*/
/* first the styling - could be made here or in a css-file. looks very silly now but its just a proof of concept so who cares */
var width=200;
var height=100;
var pwprompt = document.createElement("div"); //creates the div to be used as a Prompt
pwprompt.id= "password_Prompt"; //gives the Prompt an id - not used in my example but good for styling with css-file
pwprompt.style.position = "fixed"; //make it fixed as we do not want to move it around
pwprompt.style.left = ((window.innerWidth / 2) - (width / 2)) + "px"; //let it apear in the middle of the page
pwprompt.style.top = ((window.innerWidth / 2) - (width / 2)) + "px"; //let it apear in the middle of the page
pwprompt.style.border = "1px solid black"; //give it a border
pwprompt.style.padding = "16px"; //give it some space
pwprompt.style.background = "white"; //give it some background so its not transparent
pwprompt.style.zIndex = 99999; //put it above everything else - just in case

var pwtext = document.createElement("div"); //create the div for the password-text
pwtext.innerHTML = text; //put inside the text
pwprompt.appendChild(pwtext); //append the text-div to the password-Prompt
var pwinput = document.createElement("input"); //creates the password-input
pwinput.id = "password_id"; //give it some id - not really used in this example...
pwinput.type="password"; // makes the input of type password to not show plain-text
pwprompt.appendChild(pwinput); //append it to password-Prompt
var pwokbutton = document.createElement("button"); //the ok button
pwokbutton.innerHTML = "ok";
var pwcancelb = document.createElement("button"); //the cancel-button
pwcancelb.innerHTML = "cancel";
pwprompt.appendChild(pwcancelb); //append cancel-button first
pwprompt.appendChild(pwokbutton); //append the ok-button
document.body.appendChild(pwprompt); //append the password-Prompt so it gets visible
pwinput.focus(); //focus on the password-input-field so user does not need to click 

/*now comes the magic: create and return a promise*/
return new Promise(function(resolve, reject) {
    pwprompt.addEventListener('click', function handleButtonClicks(e) { //lets handle the buttons
      if (e.target.tagName !== 'BUTTON') { return; } //nothing to do - user clicked somewhere else
      pwprompt.removeEventListener('click', handleButtonClicks); //removes eventhandler on cancel or ok
      if (e.target === pwokbutton) { //click on ok-button
        resolve(pwinput.value); //return the value of the password
      } else {
        reject(new Error('User cancelled')); //return an error
      }
      document.body.removeChild(pwprompt);  //as we are done clean up by removing the password-Prompt

    });
    pwinput.addEventListener('keyup',function handleEnter(e){ //users dont like to click on buttons
        if(e.keyCode == 13){ //if user enters "enter"-key on password-field
            resolve(pwinput.value); //return password-value
            document.body.removeChild(pwprompt); //clean up by removing the password-Prompt
        }else if(e.keyCode==27){ //user enters "Escape" on password-field
            document.body.removeChild(pwprompt); //clean up the password-Prompt
            reject(new Error("User cancelled")); //return an error
        }
    });
}); 
}

maintenant, avec cela, vous pouvez utiliser l'attente dans une fonction asynchrone pour obtenir presque le même résultat que window.Prompt ():

async function testThePrompt(){
  var result = await passwordPrompt("please enter your password");
  alert(result);
}

vous voyez que ce code ressemble presque à l'utilisation de l'ancien "Invite". La grande différence est que nous utilisons maintenant du code asynchrone - pour que le code n'arrête pas de s'exécuter pendant l'attente du mot de passe - seule votre fonction async attendra jusqu'à ce que le mot de passe soit entré ou. mais pour moi, cela m'a beaucoup aidé de ne pas réécrire tout mon code simplement pour gérer la fonction de rappel. Notez que cela ne fonctionne que dans les navigateurs qui supportent async, donc à partir de 2017. anciens navigateurs comme sur les anciens ipads ou les anciennes versions de iOS en général, cela ne fonctionnera pas. si vous voulez vérifier l’événement, l’utilisateur n’a entré rien utiliser

async function testThePrompt(){
  var result;
  try{
    result = await passwordPrompt("please enter your password");
    alert(result);
  } catch(e){
    alert("user canceled");
  }
}
0
dekan