如何使链接工作，只有当在文本字段中键入正确的单词时

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

本文关键字：字段 单词时 文本 工作 链接 何使      更新时间：2023-09-26

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

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

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

密码是通用的，让我们说"letmein"。输入后，指向商店页面的链接应变为活动状态。

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

这可能吗？如果有人能帮忙，非常感谢！

如果密码确实很重要，并且您正在创建的这扇门后面有敏感数据，那么这是一个糟糕的主意。密码永远不应该是前端数据，因为任何拥有计算机的人都可以访问它们。如果用户访问真的无关紧要，这只是让用户感到特别的肤浅门户，那么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

您可以在密码正确后添加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>

然而，任何对jQuery/JS有好主意的人都应该能够提供帮助，因为这与后端无关。

在前端执行此操作是一个坏主意。任何对脚本有基本了解的人都可以启用该链接(即使不输入"密码"(

谢谢大家的回答。

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

相关文章：