僅當在文本字段中鍵入正確的單詞時，才能使鏈接有效？

Question

我為客戶建立了一個電子商務網站。 但是，任何對jQuery / JS有好主意的人都應該能夠提供幫助，因為這與后端無關。

輸入通用密碼后，他們希望顯示“隱藏”的商店頁面。

因此，在網站的首頁上將有一個密碼字段和一個提交按鈕。

密碼是通用的，比方說“ letmein”。 輸入后，到商店頁面的鏈接應變為活動狀態。

如果可能的話，在鍵入正確的單詞之前將鏈接顯示為灰色/禁用鏈接也將很不錯。

這可能嗎？ 非常感謝任何人的幫助！

Answer 1

如果密碼確實很重要，並且您要創建的這扇門后面有敏感數據，那么這是一個糟糕的主意。 密碼永遠都不應該是前端數據，因為任何有計算機的人都可以訪問密碼。 如果用戶訪問確實無關緊要，而這只是使用戶感到特別的膚淺網關，那么JavaScript確實是答案。 如果訪問是臨時的，並且安全性實際上並不重要，則應嘗試以下操作：

您可以創建一個鏈接，直到在HTML <input>輸入正確的密碼后，該鏈接才保持活動狀態。 使用JavaScript / jQuery檢查密碼是否正確，如果正確，請更改錨的值。

可能是這樣的：

HTML：

<a href="#" id="link-to-site">Password Invalid</a>
<input type="text" id="password-field" />

JS：

var correctPass = "letmein";                                       // any password you want
$("#password-field").on("change", function() {                     // everytime the value changes we check the input for the password
   if ($(this).val() == correctPass) {                             // if the value of the input is the password (no submit needed)
     $("#link-to-site").attr("href", "www.actual-site-link.com");  // changes link of anchor
     $("#link-to-site").html("You're in!");                        // changes anchor's text to show a visual change (a nice UX touch)
   }
});

這是一個工作的小提琴： JSFiddle

Answer 2

但是，任何對jQuery / JS有好主意的人都應該能夠提供幫助，因為這與后端無關。

在前端執行此操作不是一個好主意。 任何具有基本腳本知識的人都可以啟用該鏈接（即使無需輸入“密碼”）

Answer 3

您可以添加href后的密碼是正確的，並刪除如果不喜歡這個位置是工作提琴

只要安全性無關緊要，這只是您要向沒有后端驗證的所有人開放的鏈接，那么它將正常工作。

 function updateLink(input) { if (input.value == "letmein") { document.getElementById("atag").href = "http://www.google.com"; } else { document.getElementById("atag").removeAttribute("href"); } }

 <html> <body> <input type="text" onkeyup="updateLink(this);"> <a id="atag">Google</a> </body> </html>

Answer 4

謝謝你的回答。

要回答這個問題-不，安全不是這里的問題。 只是增加一層排他性。 用戶注冊郵件列表時將收到通用密碼。

僅當在文本字段中鍵入正確的單詞時，才能使鏈接有效？

問題描述

4 個解決方案

解決方案1
2 2015-08-04 15:29:11

解決方案2
1 2015-08-04 15:30:07

解決方案3
1 已采納 2015-08-04 15:37:39

解決方案4
0 2015-08-04 15:47:03

僅當在文本字段中鍵入正確的單詞時，才能使鏈接有效？

問題描述

4 個解決方案

解決方案1 2 2015-08-04 15:29:11

解決方案2 1 2015-08-04 15:30:07

解決方案3 1 已采納 2015-08-04 15:37:39

解決方案4 0 2015-08-04 15:47:03

解決方案1
2 2015-08-04 15:29:11

解決方案2
1 2015-08-04 15:30:07

解決方案3
1 已采納 2015-08-04 15:37:39

解決方案4
0 2015-08-04 15:47:03