使用 Material Design Lite 按下回车键时的 HTML 按钮点击效果答案

【问题标题】：Html button click effect when press the enter key using Material Design Lite使用 Material Design Lite 按下回车键时的 HTML 按钮点击效果
【发布时间】：2018-04-28 11:52:01
【问题描述】：

我现在正在制作示例登录窗口，使用来自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>

我尝试了将类型属性设置为“提交”的代码。它没有出错，但是当我按下回车键时，我想让它涟漪。我怎样才能给那个按钮点击效果和涟漪效果？

【问题讨论】：

标签： html material-design

【解决方案1】：

您在button 上使用了错误的类来获取波纹。将mdl-button--ripple-effect 替换为mdl-js-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>

【讨论】：

感谢您的回复。但是，我想制作 Button ripple 并且当我应用您的代码并按下回车键时，该按钮不会产生任何影响。就没有办法实现吗？
如果您运行上面的代码 sn-p，该按钮确实会产生涟漪。您的程序中可能有一些其他脚本阻止它这样做。