javascript - 仅当在文本字段中输入正确的单词时，如何才能使链接起作用？

Question

我为客户构建了一个电子商务网站。然而，任何对 jQuery/JS 有好的了解的人都应该能够提供帮助，因为这与后端无关。

他们希望在输入通用密码时显示“隐藏”商店页面。

因此，网站的主页上将有一个密码字段和一个提交按钮。

密码是通用的，比如说“letmein”。输入后，商店页面的链接应变为事件状态。

如果可能的话，在输入正确的单词之前将链接显示为灰色/禁用也是很好的。

这可能吗？如果有人能提供帮助，非常感谢!

Answer 1

如果密码确实很重要，并且您创建的这扇门后面有敏感数据，那么这是一个糟糕的主意。密码永远不应该是前端数据，因为任何拥有计算机的人都可以访问它们。如果用户访问确实不重要，并且这只是一个让用户感觉特别的表面网关，那么 JavaScript 确实是答案。如果访问是随意的并且安全性实际上并不重要，您应该尝试以下操作:

您可以创建一个链接，该链接在将正确的密码输入到 HTML <input> 之前保持非事件状态。 。使用 JavaScript/jQuery 检查密码是否正确，如果正确则更改 anchor 的值。

可能是这样的:

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

这是一个工作 fiddle :JSFiddle