Эффект нажатия кнопки HTML при нажатии клавиши ввода с помощью Material Design Lite - PullRequest
Новая
       9

Эффект нажатия кнопки HTML при нажатии клавиши ввода с помощью Material Design Lite

0 голосов
/ 28 апреля 2018

Я сейчас создаю пример окна входа в систему, используя компоненты материала из 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>

Я попробовал этот код, который установил свойства типа 'submit'. Он не делал никаких ошибок, но я хотел сделать его пульсацией , когда я нажму клавишу ввода. Как я могу дать этот эффект нажатия кнопки с эффектом ряби?

1 Ответ

0 голосов
/ 28 апреля 2018

Вы используете неправильный класс на button для пульсации. Заменить mdl-button--ripple-effect на mdl-js-ripple-effect. И каркас использует встроенный элемент с классом mdl-ripple внутри mdl-js-ripple-effect.

И для того, чтобы добиться пульсаций при нажатии, вам нужно прослушать событие 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...