如何隱藏通過Javascript對話框提示輸入的密碼？

6

你應該在一個表單元素使用帶有password類型的輸入元素：

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

來源

2012-03-04 12:52:14

+20

他詢問如何在JavaScript中做這個'' prompt（）'，而不是HTML''。 – william44isme 2013-06-20 15:08:31

+4

，並且沒有辦法做到他單獨使用javascript所要求的內容，因此他們正在提供替代方案。 – ThatAintWorking 2013-11-13 18:49:19

+1

是的，只有另一種方式是使用這種密碼輸入模式像Bootstrap或其他東西。 – 2013-11-16 01:38:30

10

您是否在尋找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

來源

2012-03-04 12:55:18

+0

感謝您的回覆。我有一個popup ...，我想在彈出 – 2012-03-04 13:08:10

+0

@PrasathPree用戶的密碼不受歡迎。我是否理解你的問題，還是你在尋找其他的東西？ – 2012-03-04 13:11:14

+0

好的.. 感謝您的建議 – 2012-03-04 13:13:40

-14

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

來源

2013-01-02 22:00:13 Maxwell

+12

請解釋你的代碼如何回答這個問題... – 2013-01-02 22:20:00

+0

這種方式並不安全;該問題要求密碼框看起來像 – Stardust 2016-02-15 19:01:23

9

你不能用一個JavaScript window.prompt()

考慮屏蔽輸入使用jQuery UI模式表單對話框。

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

來源

2013-04-05 10:30:24

+8

沒有jQuery標籤，請不要使用它。 – 2013-08-05 17:47:59

+16

@CharlesJohnThompsonIII 這將是一個可能的解決方案，以防他不知道的情況 – 2013-09-24 07:49:28

+3

Thanks @TimeSheep。這就是爲什麼我使用「考慮」這個詞。 – 2015-10-28 16:07:09

-1

我試圖解決下列方式同樣的問題：

在主要頁面的用戶應以發起請求按下一個按鈕，將打開一個彈出按下一個按鈕由JavaScript命令window.open("password.html","passwordRequest",windowStyleVar)，窗戶其中windowStyleVar可能是：

var windowStyleVar = "top=10, left=10, width=250, height=200, status=no, 
        menubar=no, toolbar=no scrollbars=no";

password.html樣子：

<html> 
<head> 
    <title>Richiesta password</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript"> 
     function andiamo() 
     { 
      //pass the password to the main page "THeForm" form to <input type="hidden" name="vpassword" value=""> 
    window.opener.document.getElementById('TheForm').vpassword.value=document.getElementById("picchio").value; 
    // launch the javascript function processRequest() in order to compare password and whatever You need in the main page 
      window.opener.processRequest(); 
      window.close(); 
     } 
    </script> 
</head> 
<body> 
    <div>type the password <input type="password" name="picchio" id="picchio"><input type="button" value="ok?" onclick="andiamo();"></div> 
</body>

window.opener.processRequest()調用非常重要，因爲它將控件返回到主頁面，強制主頁面javascript完成預期的操作。

來源

2013-05-08 13:14:53 2p71828

3

阻止輸入密碼的唯一方法是使用<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); 
};

來源

2014-06-28 23:57:51 Luc

+0

你真的應該把CSS應用到style標記中，而不是在JS中......並且請不要使用'
'來設計元素的樣式 – 2015-02-11 17:52:04

+1

@ZachSaucier將CSS和JS一起使用沒有什麼問題。如果有的話，爲什麼DOM（和jQuery）會讓你這樣做。（看看React.js和Angular是如何工作的。）我爲了簡單起見，所以任何人都可以複製並粘貼我的答案。至於使用'
'標籤，你是對的，我可以使用保證金或填充。 – Luc 2015-02-11 18:16:48

1

目前還沒有辦法來編輯prompt()功能在JavaScript中，使其隱藏的文本輸入。

相反，我們需要在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); 
    } 
});

最有可能的，你想讓它看起來像一個彈出，所以我加了一些基本的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

來源

2015-02-11 18:30:50

-1

作爲很多答案，您不能使用JavaScript屏蔽輸入，但使用自定義解決方案完成此功能的一些替代方法或使用密碼輸入而不是。

jQuery UI的 - 對話框模式窗體

使用一個模式對話框，要求用戶在一個多步驟的過程中輸入的數據。在內容區域嵌入表單標記，將模式選項設置爲true，並使用按鈕選項指定主用戶和輔助用戶操作。

編號：Dialog Modal Form

的jQuery插件即興

使用你寫html標籤html選項。

編號：Impromptu Plugin

使用JavaScript

只有打開包含密碼的表單字段一個小窗口：

<script language="JavaScript"><!-- 
function getPassword() { 
    WinId = window.open('','newwin','width=100,height=100'); 
    if (!WinId.opener) WinId.opener = self; 
    Text = '<form '; 
    Text += 'onSubmit="opener.location=this.password.value + \'.html\'; self.close()">'; 
    Text += '<input type="password" name="password">'; 
    Text += '<\/form>'; 
    WinId.document.open(); 
    WinId.document.write(Text); 
    WinId.document.close(); 
} 
//--></script>

編號：irt.org

來源

2016-05-17 07:26:48

如何隱藏通過Javascript對話框提示輸入的密碼？

回答

相關問題