Question

我试图通过登录框创建一个非常简单的（不需要它是安全的）页面。

当用户输入密码时，我希望按钮转到某个URL。如果密码不正确，则应显示警告。

到目前为止，这是我的代码;

＆＃13;

$(document).ready(function() {
  $('.login').click(function() {
    if ($('input:password').val() == "hello") {
      alert('Right Password!');
     else 
      alert('Wrong Password!');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="password" id="password" />
  <input type="button" class="login" value="Continue" />
</form>

＆＃13;

我希望我的代码能做什么： 点击.login上的点击功能来检查如果：密码等于＆＃39;你好＆＃39; 然后转到URL（用于测试目的的警报）或 else ：警告消息。

我遇到的问题： 根本没有对按钮的当前响应。如果在填写字段后按Enter键，页面将重新加载。我希望我的用户能够使用回车键触发按钮，这可能吗？

我在结束我的身体之前加载脚本，然后在我头脑中调用库。

Answer 1

您错过了}else{，对于输入，您可以使用keyup()并检测使用event.keyCode按下的键以触发{{1}的点击}按钮：

＆＃13;

.login

＆＃13;

$(document).ready(function() {
  $('.login').click(function() {
    if ($('input:password').val() == "hello") {
      alert('Right Password!');
    } else {
      alert('Wrong Password!');
    }
  });
  $('input:password').keyup(function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
      $('.login').click();
    }
  });
});

＆＃13;

要重定向到<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="password" id="password" /> <input type="button" class="login" value="Continue" /> </form>，您可以使用url

Answer 2

基本上问题是你缺少{大括号。因为这样你的代码不起作用。试试下面的代码

$(document).ready(function() {
  $('.login').click(function() {
    if ($('input:password').val() == "hello") {
      alert('Right Password!');
    } else {
      alert('Wrong Password!');
    }
  });
});

Answer 3

如果输入在填写字段后按下，页面重新加载。

页面重新加载点击回车键，因为form 已提交 - 您可以禁用使用此功能：

$("form").submit(function(event) {
  event.preventDefault();
});

（请注意，在代码段，由于限制，您无法检查form提交）

要听输入密钥，您可以使用：

$('input:password').keyup(function(event) {
  if (event.keyCode == 13) {
    $('.login').click(); // trigger click
  }
});

见下面的演示：

＆＃13;

$(document).ready(function() {

  // this prevents page reload on pressing enter
  $("form").submit(function(event) {
    event.preventDefault();
  });

  // click listener
  $('.login').click(function() {
    if ($('input:password').val() == "hello") {
      alert('Right Password!');
    } else {
      alert('Wrong Password!');
    }
  });

  // respond to enter key
  $('input:password').keyup(function(event) {
    if (event.keyCode == 13) {
      $('.login').click(); // trigger click
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="password" id="password" />
  <input type="button" class="login" value="Continue" />
</form>

＆＃13;

jQuery密码登录表单

3 个答案: