我需要帮助将键盘焦点添加到我的按钮

Question

我正在创建一些“材质设计”按钮，但我遇到了一些问题，让键盘选项卡专注于我的按钮。理想情况下，当您选择模式时，我想要做的是模仿Material UI中的效果：（https://material-ui-next.com/demos/buttons/），但是，我很高兴能够专注于工作。

我尝试过添加课程：专注无济于事。任何帮助将不胜感激

Codepen

<!-- header -->
<header>
  <h2 tabindex="0">Material Design Buttons</h2>
</header>
<!-- @end header -->

<!-- Main content -->
<main role="main">
  <section>
  <h3 class="heading">Raised Buttons</h3>
  <div class="wrap">
    <div class="holder col-4">
      <div class="demo"><button class="rkmd-btn btn-lightBlue" tabindex="0">Primary</button></div>
      <div class="captions">Normal Button</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
      <div class="captions">keyboard Focus</div>
    </div>
     <div class="holder col-4">
      <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
      <div class="captions">Ripple Effect</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Primary</button></div>
      <div class="captions">Disabled Button</div>
    </div>
  </div>
</section>
<section>
  <h3 class="heading">Raised Buttons Secondary</h3>
  <div class="wrap">
    <div class="holder col-4">
      <div class="demo"><button class="rkmdWhite-btn  Nutrien-greenSecondary" tabindex="0">Secondary</button></div>
      <div class="captions">Normal Button</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmdWhite-btn  Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
      <div class="captions">Ripple Effect</div>
    </div>
        <div class="holder col-4">
      <div class="demo"><button class="rkmdWhite-btn  Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
      <div class="captions">Keyboard Focus</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Secondary</button></div>
      <div class="captions">Disabled Button</div>
    </div>
  </div>
</section>

  <section>
  <h3 class="heading">Raised Buttons</h3>
  <div class="wrap">
    <div class="holder col-4">
      <div class="demo"><button class="rkmdYellow-btn $Nutrien-green" tabindex="0">CTA</button></div>
      <div class="captions">Normal Button</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
      <div class="captions">Ripple Effect</div>
    </div>
        <div class="holder col-4">
      <div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
      <div class="captions">Keyboard Focus</div>
    </div>
    <div class="holder col-4">
      <div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">CTA</button></div>
      <div class="captions">Disabled Button</div>
    </div>
  </div>
</section>
<!--   <section>
    <h3 class="heading">Raised Buttons Yellow</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow">Button</button></div>
        <div class="captions">Normal Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow ripple-effect">Button</button></div>
        <div class="captions">Ripple Effect</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue" disabled>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section> -->
<!--   <section>
    <h3 class="heading">Link Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link">Button</button></div>
        <div class="captions">Link Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
        <div class="captions">Ripple Effect</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link" disabled>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section> -->
  <section>
    <h3 class="heading">Buttons in Different Colors</h3>
    <div class="wrap">
      <div class="holder col-4">
        <div class="demo"><button class="rkmdTert-btn btn-white ripple-effect ripple-dark" tabindex="0">Tertiary Link</button></div>
        <div class="captions">White</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button style="border: none;" class="rkmd-btn btn-black ripple-effect" tabindex="0">Lorem Ipsum</button></div>
        <div class="captions">Black</div>
      </div>
<!--       <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-grey ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Grey</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Green</div>
      </div> -->
  </section>
<!--     <section>
    <h3 class="heading">Fab Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button style="background: #ffffff; border: none; shadow: none;" class="rkmd-btn btn-fab btn-lightBlue ripple-effect"><i style="color: black;" class="material-icons">attach_file</i></button></div>
        <div class="captions">Normal Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-fab-mini btn-pink ripple-effect"><i class="material-icons">favorite_border</i></button></div>
        <div class="captions">Mini Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-fab-mini btn-lightBlue" disabled><i class="material-icons">cloud_upload</i></button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section> -->
</main>

// Buttons Color
$Nutrien-green: #00B455;
$Nutrien-green--hover: #00DD68;
$Nutrien-greenSecondary: #FFF;
$Nutrien-greenSecondary--hover: #00DD68;
$Nutrien-yellow: #F9E051;
$Nutrien-yellow--hover: #E9CE1A;
$Nutrien-disabled: #DFDFDF;


$btn_default: #e0e0e0;
$btn_lightBlue: #00B455;
$btn_white: #FFF;
$btn_black: #111;
$btn_grey: #f5f5f5;
$btn_orange: #ff9800;
$btn_amber: #ffc107;
$btn_green: #4caf50;
$btn_teal: #009688;
$btn_cyan: #00bcd4;
$btn_indigo: #3f51b5;
$btn_deepPurple: #673ab7;
$btn_pink: #e91e63;
$btn_red: #f44336;
$btn_yellow: #ffeb3b;
$btn_lime: #cddc39;
$btn_brown: #795548;

// KEYFRAMES
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}
// Column generator
@mixin colmk($numRows, $margin) {
  width: ((100% - (($numRows - 1) * $margin)) / $numRows);

  &:nth-child(n) {
    margin-right: $margin;
    margin-bottom: $margin;
  }

  &:nth-child(#{$numRows}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

/* -----------------------------------------------------
  Body
-------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  color: #646360;
  font-size: 16px;
  font-family: arial;
  background-color: #eee;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #03a9f4;
  outline: none;
  text-decoration: none;

  &:hover { text-decoration: underline; }
}

/* -----------------------------------------------------
    Main
-------------------------------------------------------- */
main {
  width: 100%;
  max-width: 940px;
  margin: 1.4rem auto;

  section {
    display: block;
    margin-bottom: 1.4rem;
    padding: 1.2rem;
    background-color: #fff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157);

    &:last-child { margin-bottom: 0; }

    .heading {
      margin: 0;
      padding: 0;
      font-size: 1.2rem;
    }

    .wrap {
      overflow: hidden;
      display: block;
      margin: 1rem 0 0.8rem;
      text-align: center;

      .holder {
        float: left;
        //display: inline-block;
        //margin-right: 8px;
        //margin-bottom: 8px;
        text-align: center;
        background-color: #fff;

        &:last-child { margin-right: 0; }

        &.col-3 {
          //width: calc(100% / 3 - 8px);
          @include colmk(3, 1%);
        }
        &.col-4 {
          //width: calc(100% / 4 - 9px);
          //&:nth-child(4n) { margin-right: 0; }
          @include colmk(4, 1%);
        }

        .demo {
          min-height: 120px;
          padding: 2em 0;
          display: flex;
          justify-content: center;
          align-content: center;
        }

        .captions {
          padding: 8px;
          color: rgba(0,0,0,0.5);
          font-size: 13px;
          font-weight: bold;
          border-top: 1px solid rgba(0,0,0,0.1);
        }

        @media only screen and (max-width: 860px) {
          &.col-4 {
            @include colmk(3, 1%);
          }
        }

        @media only screen and (max-width: 640px) {
          float: none;

          &.col-3,
          &.col-4 {
            display: block;
            width: 100%;

            &:nth-child(n) { margin: 0; margin-bottom: 14px; }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 960px) {
    padding: 0 1.5%;
  }
}

/* -----------------------------------------------------
   Header
-------------------------------------------------------- */
header {
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background-color: #FFF;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);

  h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 2em;
    font-weight: 300;
    letter-spacing: 1px;
  }
}

/* -----------------------------------------------------
    Footer
-------------------------------------------------------- */
footer {
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 80px;
  background-color: #FFF;
  border-top: 1px solid #EEE;

  .row {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
  }

  .footer-content {
    margin: 0 8px;
    padding: 25px 0 18px;
    text-align: center;

    span {
      color: rgba(0, 0, 0, 0.525);
      font-size: 0.857em;
      margin-right: 5px;
    }
  }

  @media only screen and (max-width: 768px) {
    span {
      display: block;
      width: 100%;
      margin-bottom: 8px;
    }
  }
}

/* ----------------------------------------------------------------------
  Material Design Raised Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmdTert-btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  padding: 0 16px 0 16px;
  line-height: 35px;
  color: #00B455;
  font-size: 14px;
  font-weight: bold !important;
  font-family: arial;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  user-select: none;
  border-radius: 2px;
  transition: all .3s ease-out;

  &:hover { }
}

.rkmd-btn {
  border: 1px solid $Nutrien-green;
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  padding: 0 16px 0 16px;
  line-height: 35px;
  color: #00B455;
  font-size: 14px;
  font-weight: bold !important;
  font-family: arial;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  user-select: none;
  border-radius: 2px;
  transition: all .3s ease-out;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);

  &:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); border: 1px solid $Nutrien-greenSecondary--hover; }
}

.rkmdgrey-btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  padding: 0 16px 0 16px;
  line-height: 35px;
  color: #A1A1A1;
  background-color: #DFDFDF;
  font-size: 14px;
  font-weight: bold !important;
  font-family: arial;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  user-select: none;
  border-radius: 2px;
  transition: all .3s ease-out;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);

  &:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); }
}


.rkmdWhite-btn {
  border: 1px solid #00B455;
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  padding: 0 16px 0 16px;
  line-height: 35px;
  color: #00B455;
  font-size: 14px;
  font-weight: bold !important;
  font-family: Arial;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  user-select: none;
  border-radius: 2px;
  transition: all .3s ease-out;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);

  &:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background: $Nutrien-green--hover; color: white; 
  border: 1px solid $Nutrien-greenSecondary--hover;}
}

.rkmdYellow-btn {
  border: 1px solid $Nutrien-yellow;
  background-color: #F9E051;
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  padding: 2px 16px 0 16px;
  line-height: 35px;
  color: black;
  font-size: 14px;
  font-weight: bold !important;
  font-family: Arial;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  user-select: none;
  border-radius: 2px;
  transition: all .3s ease-out;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);

  &:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background-color: #E9CE1A;  border: 1px solid $Nutrien-yellow--hover;}
}


/* ----------------------------------------------------------------------
  Material Design Fab Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-btn {
  &.btn-fab,
  &.btn-fab-mini {
    overflow: hidden;
    position: relative;
    margin: auto;
    padding: 0;
    line-height: normal;
    border-radius: 50%;
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.3);
    &:hover { box-shadow: 0 4px 11px 0px rgba(0,0,0,0.375); }
    i {
      display: inline-block;
      float: none;
      width: inherit;
      margin: 0;
      font-size: inherit;
      text-align: center;
      line-height: none;
      vertical-align: middle;
    }
  }
  &.btn-fab {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  &.btn-fab-mini {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* Buttons Color */
.rkmd-btn {
  &.btn-lightBlue {
    color: #FFF;
    background-color: $btn_lightBlue;
    &:hover { background-color: lighten($btn_lightBlue, 8%); }
  }

  &.btn-white {
    color: #444;
    background-color: $btn_white;
    &:hover { background-color: darken($btn_white, 2%); }
  }

  &.btn-black {
    color: #bdbdbd;
    background-color: $btn_black;
    &:hover { background-color: lighten($btn_black, 8%); }
  }

  &.btn-grey {
    color: #757575;
    background-color: $btn_grey;
    &:hover { background-color: darken($btn_grey, 4%); }
  }

  &.btn-orange {
    color: #FFF;
    background-color: $btn_orange;
    &:hover { background-color: lighten($btn_orange, 8%); }
  }

  &.btn-amber {
    color: #FFF;
    background-color: $btn_amber;
    &:hover { background-color: lighten($btn_amber, 8%); }
  }

  &.btn-green {
    color: #FFF;
    background-color: $btn_green;
    &:hover { background-color: lighten($btn_green, 8%); }
  }

  &.btn-teal {
    color: #FFF;
    background-color: $btn_teal;
    &:hover { background-color: lighten($btn_teal, 8%); }
  }

  &.btn-cyan {
    color: #FFF;
    background-color: $btn_cyan;
    &:hover { background-color: lighten($btn_cyan, 8%); }
  }

  &.btn-indigo {
    color: #FFF;
    background-color: $btn_indigo;
    &:hover { background-color: lighten($btn_indigo, 8%); }
  }

  &.btn-deepPurple {
    color: #FFF;
    background-color: $btn_deepPurple;
    &:hover { background-color: lighten($btn_deepPurple, 8%); }
  }

  &.btn-pink {
    color: #FFF;
    background-color: $btn_pink;
    &:hover { background-color: lighten($btn_pink, 8%); }
  }

  &.btn-red {
    color: #FFF;
    background-color: $btn_red;
    &:hover { background-color: lighten($btn_red, 8%); }
  }

  &.btn-yellow {
    color: #FFF;
    background-color: $btn_yellow;
    &:hover { background-color: darken($btn_yellow, 13%); }
  }

  &.btn-lime {
    color: #FFF;
    background-color: $btn_lime;
    &:hover { background-color: darken($btn_lime, 8%); }
  }

  &.btn-brown {
    color: #FFF;
    background-color: $btn_brown;
    &:hover { background-color: lighten($btn_brown, 8%); }
  }
}

/* Raised Buttons Size (Not work in Fab Buttons) */
.rkmd-btn {
  &.btn-lg {
    height: 48px;
    line-height: 48px;
  }

  &.btn-sm {
    height: 30px;
    padding: 0 1rem;
    line-height: 30px;
    font-size: 12px;
  }

  &.btn-xs {
    height: 24px;
    padding: 0 .4rem;
    line-height: 24px;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: .2px;
  }
}

/* Raised Buttons Types */
.rkmd-btn {
  &.disabled, &[disabled] {
    cursor: default !important;
    color: #9e9e9e !important;
    box-shadow: none !important;
  }

  &.disabled:not(.btn-flat), &[disabled]:not(.btn-flat) {
    background-color: #cdcdcd !important;
    &:hover { background-color: #cdcdcd !important; }
  }

  &.btn-flat {
    box-shadow: none !important;
    background-color: transparent !important;
    &:hover { background-color: #cecece !important; box-shadow: none !important; }

    &.disabled:hover,
    &[disabled]:hover { background-color: transparent !important; }
  }

  &.btn-link {
    color: #3949ab !important;
    box-shadow: none !important;
    background-color: transparent !important;

    &:hover {
      text-decoration: underline !important;
      background-color: transparent !important;
      box-shadow: none !important;
    }

    &.disabled,
    &[disabled] {
      color: #9fa8da !important;
      text-decoration: underline !important;
      background-color: transparent !important;
    }

    &.disabled:hover,
    &[disabled]:hover { background-color: transparent !important; }
  }

  i {
    float: left;
    width: auto;
    height: auto;
    margin-right: 10px;
    font-size: 1.3rem;
    line-height: inherit;

    &.right {
      float: right !important;
      margin: 0;
      margin-left: 10px;
    }
  }
}

/* ----------------------------------------------------------------------
  Material Design Ripple Effect - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.ripple-effect {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  z-index: 1;

  .ripple {
    display: block;
    position: absolute;
    border-radius: 100%;
    background: rgba(255,255,255,0.5);
    transform: scale(0);
    pointer-events: none;
  }

  &.ripple-dark {
    .ripple {
      background: rgba(0,0,0,0.1) !important;
    }
  }

  &.ripple-red {
    .ripple {
      background: rgba(244,67,54,0.725) !important;
    }
  }

  &.ripple-orange {
    .ripple {
      background: rgba(255,152,0,0.725) !important;
    }
  }

  &.ripple-yellow {
    .ripple {
      background: rgba(255,235,59,0.725) !important;
    }
  }

  &.ripple-green {
    .ripple {
      background: rgba(221,104,100,0.725) !important;
    }
  }

  &.ripple-purple {
    .ripple {
      background: rgba(156,39,176,0.725) !important;
    }
  }

  &.ripple-teal {
    .ripple {
      background: rgba(0,150,136,0.725) !important;
    }
  }

  &.ripple-pink {
    .ripple {
      background: rgba(233,30,99,0.725) !important;
    }
  }

  .animated {
    animation: ripple 0.6s linear;
  }

  @include keyframes('ripple') {
    100% {
      opacity: 0;
      transform: scale(2.5);
    }
  }
}

$(document).ready(function() {
  $('.ripple-effect').rkmd_rippleEffect();
});

(function($) {
  $.fn.rkmd_rippleEffect = function() {
    var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;

    btn = $(this).not('[disabled], .disabled');

    btn.on('mousedown', function(e) {
      self = $(this);

      // Disable right click
      if(e.button === 2) {
        return false;
      }

      if(self.find('.ripple').length === 0) {
        self.prepend('<span class="ripple"></span>');
      }
      ripple = self.find('.ripple');
      ripple.removeClass('animated');

      eWidth = self.outerWidth();
      eHeight = self.outerHeight();
      size = Math.max(eWidth, eHeight);
      ripple.css({'width': size, 'height': size});

      rippleX = parseInt(e.pageX - self.offset().left) - (size / 2);
      rippleY = parseInt(e.pageY - self.offset().top) - (size / 2);

      ripple.css({ 'top': rippleY +'px', 'left': rippleX +'px' }).addClass('animated');

      setTimeout(function() {
        ripple.remove();
      }, 800);

    });
  };
}(jQuery));