仅当在文本字段中键入正确的单词时，才能使链接有效？
[英]How can I make a link work, only when a correct word is typed into a text field?
问题描述
I building an eCommerce website for a client. 
我为客户建立了一个电子商务网站。 However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend. 但是，任何对jQuery / JS有好主意的人都应该能够提供帮助，因为这与后端无关。
They want to show a 'hidden' shop page, when a generic password is entered. 输入通用密码后，他们希望显示“隐藏”的商店页面。
So on the homepage of the site will be a password field, and a submit button. 因此，在网站的首页上将有一个密码字段和一个提交按钮。
The password is generic, let's say 'letmein'. 密码是通用的，比方说“ letmein”。 When entered, the link to the shop page should become active. 输入后，到商店页面的链接应变为活动状态。
If possible it would also be great to have the link greyed out/disabled before the correct word is typed. 如果可能的话，在键入正确的单词之前将链接显示为灰色/禁用链接也将很不错。
Is this possible? 这可能吗？ Thanks so much if anyone can help! 非常感谢任何人的帮助！
4 个解决方案
解决方案1
2 2015-08-04 15:29:11
If passwords do matter and there is sensitive data behind this door you are creating, this is a terrible idea. 如果密码确实很重要，并且您要创建的这扇门后面有敏感数据，那么这是一个糟糕的主意。 Passwords should never be a front-end data, because they are accessible to anyone with computer. 密码永远都不应该是前端数据，因为任何有计算机的人都可以访问密码。 If user access really doesn't matter and this is just a superficial gateway to make users feel special , JavaScript is indeed the answer. 如果用户访问确实无关紧要，而这只是使用户感到特别的肤浅网关，那么JavaScript确实是答案。 If access is casual and security doesn't actually matter you should try this: 如果访问是临时的，并且安全性实际上并不重要，则应尝试以下操作：
You could create a link that stays inactive until the right password is entered into an HTML <input> . 您可以创建一个链接，直到在HTML <input>输入正确的密码后，该链接才保持活动状态。 Use JavaScript/jQuery to check if the password is correct and change the anchor's value if it is. 使用JavaScript / jQuery检查密码是否正确，如果正确，请更改锚的值。
Something like this maybe: 可能是这样的：
HTML: HTML：
<a href="#" id="link-to-site">Password Invalid</a>
<input type="text" id="password-field" />
JS: 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)
}
});
解决方案2
1 2015-08-04 15:30:07
However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.
Doing this on the front end is a bad idea. 在前端执行此操作不是一个好主意。 Anyone with a rudimentary knowledge of scripting will be able to enable the link (even without typing in the "password") 任何具有基本脚本知识的人都可以启用该链接（即使无需输入“密码”）
解决方案3
1 已采纳 2015-08-04 15:37:39
You can add the href after the password is correct and remove if it isn't like this here is working fiddle 您可以添加href后的密码是正确的，并删除如果不喜欢这个位置是工作提琴
As long as security doesn't matter this is just a link that you want to open up to everyone with no backend validation then this will work fine. 只要安全性无关紧要，这只是您要向没有后端验证的所有人开放的链接，那么它将正常工作。
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>
解决方案4
0 2015-08-04 15:47:03
Thanks for your answers all. 谢谢你的回答。
To answer this question - no, security is not an issue here. 要回答这个问题-不，安全不是这里的问题。 It is just to add a layer of exclusivity. 只是增加一层排他性。 Users will receive the generic password when they sign up for the mailing list. 用户注册邮件列表时将收到通用密码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.