基于Material Design Lite实现登录窗口回车键触发按钮点击效果

嘿，这个需求很常见，我给你两种靠谱的实现方式，完美适配Material Design Lite的组件：

方法一：利用HTML表单默认行为（推荐，语义化+简洁） #

把登录相关的输入框和按钮包裹在<form>标签内，将登录按钮设置为type="submit"，这样用户在输入框按下回车键时，浏览器会自动触发表单的提交事件，我们只需要监听这个事件来执行登录逻辑即可，无需额外的键盘监听代码。

完整代码示例：

<!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>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <main class="mdl-layout__content">
      <div class="page-content" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
        <!-- 用form包裹所有登录控件 -->
        <form id="loginForm" class="mdl-card mdl-shadow--6dp" style="width: 350px; padding: 2rem;">
          <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">登录</h2>
          </div>
          <div class="mdl-card__supporting-text">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" type="text" id="username" name="username">
              <label class="mdl-textfield__label" for="username">用户名</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: 1rem;">
              <input class="mdl-textfield__input" type="password" id="password" name="password">
              <label class="mdl-textfield__label" for="password">密码</label>
            </div>
          </div>
          <div class="mdl-card__actions" style="display: flex; justify-content: flex-end;">
            <!-- 设置按钮类型为submit -->
            <button id="loginBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">
              登录
            </button>
          </div>
        </form>
      </div>
    </main>
  </div>

  <script>
    // 监听表单提交事件
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      // 阻止表单默认的页面跳转行为
      e.preventDefault();
      
      // 执行你的登录逻辑
      console.log('触发登录操作');
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      
      // 这里可以添加登录请求、表单验证等逻辑
    });
  </script>
</body>
</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>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <main class="mdl-layout__content">
      <div class="page-content" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
        <div class="mdl-card mdl-shadow--6dp" style="width: 350px; padding: 2rem;">
          <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">登录</h2>
          </div>
          <div class="mdl-card__supporting-text">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" type="text" id="username">
              <label class="mdl-textfield__label" for="username">用户名</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: 1rem;">
              <input class="mdl-textfield__input" type="password" id="password">
              <label class="mdl-textfield__label" for="password">密码</label>
            </div>
          </div>
          <div class="mdl-card__actions" style="display: flex; justify-content: flex-end;">
            <button id="loginBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
              登录
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // 获取页面元素
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const loginBtn = document.getElementById('loginBtn');

    // 定义登录逻辑函数
    function performLogin() {
      console.log('触发登录操作');
      const username = usernameInput.value;
      const password = passwordInput.value;
      
      // 这里添加登录请求、表单验证等逻辑
    }

    // 给登录按钮绑定点击事件
    loginBtn.addEventListener('click', performLogin);

    // 定义回车键检查函数
    function checkEnterKey(e) {
      // 使用e.key判断更符合现代标准，keyCode已被废弃
      if (e.key === 'Enter') {
        performLogin();
      }
    }

    // 给两个输入框绑定键盘事件
    usernameInput.addEventListener('keydown', checkEnterKey);
    passwordInput.addEventListener('keydown', checkEnterKey);
  </script>
</body>
</html>

小提示 #

• 推荐使用方法一，因为它符合HTML语义化设计，代码更简洁，还能自动适配浏览器的默认行为。
• 如果使用方法二，记得给所有需要触发回车登录的输入框都绑定事件，并且用e.key === 'Enter'代替已废弃的keyCode，保证更好的兼容性。

内容的提问来源于stack exchange，提问作者ditto