Question

我现在使用Material Design Lite中的材质组件制作示例登录窗口。当我按下回车键时，我想点击登录按钮。

<!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>

我尝试使用此代码将类型属性设置为“提交”。它没有发生任何错误，但是当我按下回车键时我想让它涟漪。如何通过涟漪效应给出按钮单击效果？

Answer 1

您在button上使用了错误的类来表示涟漪效应。将mdl-button--ripple-effect替换为mdl-js-ripple-effect。框架在mdl-ripple。

中使用了带有mdl-js-ripple-effect类的内联元素

为了实现点击的涟漪，您需要聆听文档的 onkeydown 事件并进行点击。

所以，它是：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

使用Material Design Lite按回车键时，Html按钮单击效果

1 个答案: