web-dev-qa-db-ja.com

JavaScriptダイアログプロンプトで入力したパスワードを非表示にするにはどうすればよいですか？

JavaScriptのダイアログプロンプトでユーザーが入力したパスワードを非表示にするにはどうすればよいですか？たとえば、次のようなものを使用します

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

例えば12345を入力すると、*****または.....ダイアログボックスで。

誰も私がこれを行う方法を提案したり、サンプルコードを提供したりできますか？

javascriptpasswords
26
Prasath Mani

Prompt 関数を探していますか？

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

alert("Hello, " + response);

ダイアログは次のようになります。

enter image description here

これはおそらく入力をマスクしないため、パスワード入力を取得する最良の方法ではありません。代わりに、パスワード入力フィールドを持つHTMLフォームの使用を検討してください。

代わりに、基本的なHTTP認証をお探しですか？

これを設定するには、Webサーバーにいくつかのヘッダーを送信させます。たとえば、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>";
}
?>

これにより、クライアントは次のようなダイアログを表示します。

enter image description here

15
Dagg Nabbit

JavaScript window.Prompt()で入力をマスクすることはできません

JQuery UIモーダルフォームダイアログの使用を検討してください。

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

10
Oundless

フォーム要素でpassword型の入力要素を使用する必要があります。

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

パスワードの入力をブロックする唯一の方法は、<input type="password">。これをポップアップダイアログにする方法の例を次に示します。

/*
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);
};
4
Luc

現在、JavaScriptでPrompt()関数を編集してテキスト入力を非表示にする方法はありません。

代わりに、HTMLでポップアップを作成し、必要なときに表示する必要があります。最小限の例を作成しました here ：

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);
    }
});

ほとんどの場合、ポップアップのようにlookにする必要があるため、ここで基本的なCSSを追加しました。

.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;
}

全体で、 this demo が得られます

2
Zach Saucier

上記の助けと http://bluebirdjs.com/docs/async-dialogs.html のチュートリアルを使用して構築された私の解決策は、非同期関数を使用することでした。プロンプトとそのロジックを置き換えたかったからです。残念ながら、私は簡単な解決策を見つけることができませんでしたが、これは私のために働いた：

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
        }
    });
}); 
}

これで、非同期関数内でawaitを使用して、window.Prompt（）とほぼ同じ結果を得ることができます。

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

このコードは、古い「プロンプト」を使用したように見えます。大きな違いは、現在async-codeを使用しているため、パスワードを待機している間にコードの実行が停止しないことです。async-functionはパスワードが入力されるか、しかし、私にとっては、コールバック関数などを処理するためだけに、コード全体を新たに書き直さずに済みました。これは非同期をサポートするブラウザでのみ機能するため、2017年以降に注意してください。古いipadや古いバージョンのiosなどの古いブラウザは一般に動作しません。ユーザーが何も入力しなかったイベントを確認する場合

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