Comment puis-je cacher le mot de passe entré par l'intermédiaire d'un JavaScript boîte de dialogue d'invite?

Vous êtes à la recherche pour le prompt fonction?

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

alert("Hello, " + response);

La boîte de dialogue devrait ressembler à quelque chose comme ceci:

Ce que ce n'est probablement pas la meilleure façon d'obtenir le mot de passe d'entrée, parce qu'il ne masque pas l'entrée. Au lieu de cela, envisager l'utilisation d'un formulaire HTML avec un mot de passe champ de saisie.

Peut-être que vous êtes à la recherche pour l'authentification HTTP de base à la place?

Vous pouvez le régler par l'obtention de votre serveur web pour envoyer quelques en-têtes; par exemple en 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 va entraîner le client pour afficher une boîte de dialogue comme ceci:

Vous devez utiliser un élément input de type password dans un élément de formulaire:

<input name="myPass" id="myPass" type="password" />

Il n'y a actuellement aucun moyen de modifier le prompt() fonction en JavaScript pour le faire masquer la saisie de texte.

Au lieu de cela, nous avons besoin de créer un popup en HTML et de le présenter en cas de besoin. J'ai créé un minimaliste exemple 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);
}
});

Très probablement, vous voulez qu'il look comme un pop-up, j'ai donc ajouté un peu de 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

Une solution pour moi, bâtie avec l'aide de la ci-dessus et le tutoriel de http://bluebirdjs.com/docs/async-dialogs.html était d'utiliser une fonction async.
Parce que je voulais remplacer l'invite de commandes et de sa logique. Malheureusement, je ne pouvais pas trouver une solution plus facile, 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'attendent à l'intérieur d'un async-fonction permettant d'obtenir près le même résultat que la fenêtre.prompt():

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

vous voyez que ce code presque ressemble à l'utilisation de l'ancienne "invite de commande". La grande différence est que nous avons maintenant utiliser asynchrone-code - de sorte que le code ne s'arrête pas l'exécution en attendant que le mot de passe juste votre asynchrone en fonction attendrai jusqu'à ce que le mot de passe est entré, ou . mais pour moi, il a beaucoup aidé à ne pas réécrire mon code entier de nouveau juste pour le rappel de la fonction et des trucs.
notez que cela ne fonctionne que dans les navigateurs qui prend en charge asynchrone, donc à partir de 2017 en avant. les anciens navigateurs comme sur les anciens ipad ou d'anciennes versions d'ios en général, il ne fonctionnera pas.
si vous voulez vérifier pour le cas où l'utilisateur n'a pas à entrer quoi que ce soit d'utiliser

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

alert("Username=Bob/Password=Pass <punctuation counts!>");
var user=prompt("Username")
var pass=prompt("Password")
if (user!=="Bob")
{
alert("Login was unsuccessful")
}
else
{
if (pass!=="Pass")
{
alert("Login was unsuccessful")
window.history.back()
}
}