当使用材料设计Lite按Enter键时，HTML按钮单击效果

我现在使用材料设计精简版的材料组件进行样品登录窗口。当我击中输入键时，我想单击登录按钮。

<!DOCTYPE html>
<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <style>
    form#loginSection{
      padding: 30px;
      position:absolute;
      top:50%;
      left:50%;
      background:white:;
      transform:translate(-50%, -50%)
    }
  </style>
  <body>
    <form id="loginSection" class="mdl-shadow--2dp">
      <p>Log in to your Account</p>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"id="itsme">
        <input class="mdl-textfield__input" type="text" id="Accountid">
          <label class="mdl-textfield__label"for="Accountid">Email</label>
      </div></br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" >
        <input class="mdl-textfield__input" type="text" id="Accountid">
          <label class="mdl-textfield__label"for="Accountid">Password</label>
    </div></br>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="submit" onclick="alert('clicked')">Log in</button>
    <button class="mdl-button mdl-js-button mdl-button--colored" type="button">Forgot Password?</button>
    </form>
  </body>
</html>

我尝试了此代码，该代码将类型属性设置为"提交"。它没有犯任何错误，但是当我击中Enter键时，我想让它 ripple 。我如何以连锁效果给出该按钮点击效果？

您正在使用button上的错误类用于波纹。用mdl-js-ripple-effect替换mdl-button--ripple-effect。该框架在mdl-js-ripple-effect中使用了与mdl-ripple类的内联元素。

和在单击时实现波纹的订单，您需要收听文档事件的 onkeydown 并单击。

。

所以，是：

var btn = document.getElementById('btn');
document.body.onkeydown = function(e) {
  if (e.keyCode == 13) btn.click();
};

<!DOCTYPE html>
<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style>
  form#loginSection {
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: white:;
    transform: translate(-50%, -50%)
  }
</style>
<body>
  <form id="loginSection" class="mdl-shadow--2dp">
    <p>Log in to your Account</p>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="itsme">
      <input class="mdl-textfield__input" type="text" id="Accountid">
      <label class="mdl-textfield__label" for="Accountid">Email</label>
    </div>
    </br>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="Accountid">
      <label class="mdl-textfield__label" for="Accountid">Password</label>
    </div>
    </br>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--ripple-effect mdl-js-ripple-effect" type="submit"><span class="mdl-ripple"></span>Log in</button>
    <button id='btn' class="mdl-button mdl-js-button mdl-button--colored" type="button">Forgot Password?</button>
  </form>
</body>
</html>

相关内容

最新更新

热门标签：