Question

我使用前端框架基础。仅当登录和密码输入填充文本时，我才能在此菜单中启用登录按钮。

<form data-abide="ajax">
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Login" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Password" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <a href="#" class="button tiny disabled">Log in</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#" class="button tiny">Register</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#">Forgot password?</a>
  </div>
 </div>
</form>

Answer 1

如果我理解正确，您只有在用户点击登录链接时才会显示登录表单。

为了达到这个目的，我建议移动链接，然后在jQuery中使用其中的任何一个（切换/显示/滑动），以便在点击时显示它。

以下是经过修改的HTML：

<form id="loginForm" data-abide="ajax">
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Login" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Password" />
  </div>
 </div>
</form>

 <div class="row">
  <div class="large-12 columns text-center">
   <a id="login" href="#" class="button tiny disabled">Log in</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#" class="button tiny">Register</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#">Forgot password?</a>
  </div>
 </div>

这是一个如何显示/隐藏登录表单的小提琴：

http://jsfiddle.net/9C4s7/

js中的注释行切换幻灯片（单击链接将显示表单，再次单击它将隐藏它）。活动行只会在单击后向下滑动。所以，你继续选择最适合你的那个！

Answer 2

您可以添加一个函数来观察输入框的onkeypress侦听器。这是一个如何在用户名上进行操作的小提琴，你也可以为密码输入做类似的事情。

http://jsfiddle.net/fFLq4/

在元素中添加几个元素ID：

<form data-abide="ajax">
 <div class="row">
  <div class="large-12 columns">
   <input type="text" id="loginTxtBox" placeholder="Login" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Password" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <a href="#" id="loginButton" class="button tiny disabled">Log in</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#" class="button tiny">Register</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#">Forgot password?</a>
  </div>
 </div>
</form>

添加javascript函数来监听按键：

var textBox = document.getElementById("loginTxtBox");

textBox.onkeypress=function(textBox){
    if(this.value.length >= 5)
    {
        document.getElementById("loginButton").className = "button tiny";
    }
    else
    {
        document.getElementById("loginButton").className = "button tiny disabled";
    }
};

只有在您的登录按钮中至少包含5个字符时，才会激活此登录按钮。也可以将其应用于您的密码输入。

在基础中启用或禁用登录按钮

2 个答案: