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

Question

我为客户建立电子商务网站。但是，任何对 jQuery/JS 有好主意的人都应该能够提供帮助，因为这与后端无关。

他们想在输入通用密码时显示 'hidden' 商店页面。

所以在站点的主页上会有一个密码字段和一个提交按钮。

密码是通用的，比方说'letmein'。输入后，商店页面的 link 应该会激活。

如果可能的话，在输入正确的单词之前让 link 变灰 out/disabled 也很好。

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

Answer 1

如果密码很重要并且您正在创建的这扇门后面有敏感数据，这是一个糟糕的主意。密码永远不应该是前端数据，因为它们是任何有电脑的人都可以访问。如果用户访问真的无关紧要，这只是让用户 感到特别 的表面途径，那么 JavaScript 确实是答案。如果访问是偶然的并且安全性实际上并不重要，那么您应该试试这个：

您可以创建一个 link，在将正确的密码输入到 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)
   }
});

这是一个有效的 fiddle：JSFiddle

Answer 2

However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.

在前端这样做是个坏主意。任何具有基本脚本知识的人都可以启用 link（即使不输入 "password"）

Answer 3

您可以在密码正确后添加href，如果不正确则删除here is working fiddle

只要安全性无关紧要，这只是一个 link 您想要向所有人开放而无需后端验证的内容，那么它就可以正常工作。

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

感谢大家的回答。

回答这个问题 - 不，这里安全不是问题。它只是增加了一层排他性。用户在注册邮件列表时将收到通用密码。

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

How can I make a link work, only when a correct word is typed into a text field?

javascript

forms

validation

jquery

shopify