如何调整空格键并输入仅适用于第三个按钮而不适用于任何其他按钮？答案

【问题标题】：How to adjust the space bar and enter works only for third button and not for any other button?如何调整空格键并输入仅适用于第三个按钮而不适用于任何其他按钮？
【发布时间】：2016-10-05 11:11:33
【问题描述】：

https://jsfiddle.net/ffkwgddL/

如果我单击我的第一个按钮，即介绍然后按空格键，我的代码中有三个按钮第一个按钮，第二个按钮和第三个按钮，它再次工作，因为我单击了第一个按钮，但如果我单击第一个按钮然后是第三个按钮，即单击以获取下一个内容，然后按空格它在我单击第三个按钮时起作用。我希望空格键和输入仅适用于第三个按钮，而不适用于任何其他按钮，抱歉，我的小提琴看起来不太好，因为它只适用于风景视图。

<body>
<div class="container" id="wrapper">
<div class="top">
<div class="heading">
  <h1>Multiples</h1>
</div>
 </div>
 <div class="main-content">
 <div class="content-left col-xs-3">
  <div class="btns" role="group" aria-label="...">

    <button class="btn btn-default .btn-lg text-break first-button">Introduction<br>
     </button>
    <br>
    <button class="btn btn-default .btn-lg text-break second-button">Properties of Multiples</button>
  </div>
  </div>
  <div class="content-right col-xs-9">
  <div class="content-first-button">
    <div class="button1_text1 well well-lg">A <b><i>multiple</i></b> is the product of the given numbers and some other counting numbers.</div>
    <div class="button1_text2">
      <div class="button1_text2_1"><b>e.g.-</b></div>
      <div class="button1_text2_2"><br>
        When we multiply the number by <b>1, 2, 3, 4 ....</b>and so on, </div>
      <div class="button1_text2_3">We get multiples of that number.</div>
      <div class="button1_text3"><b>Multiples of 3</b></div>
      <center>
        <div class="button1_text4">
          <p class="abcd"><b>1&nbsp&nbsp;</b> x <b>&nbsp&nbsp;3</b> &nbsp&nbsp;= <b> &nbsp&nbsp;3</b></p>
          <p><b>2&nbsp&nbsp;</b> x <b>&nbsp&nbsp;3</b> &nbsp&nbsp;= <b> &nbsp&nbsp;6</b></p>
          <p><b>3&nbsp&nbsp;</b> x <b>&nbsp&nbsp;3</b> &nbsp&nbsp;= <b> &nbsp&nbsp;9</b></p>
          <p class="abcde"><b>&nbsp&nbsp;4&nbsp&nbsp;</b> x <b>&nbsp&nbsp;3</b> &nbsp&nbsp;= <b> &nbsp&nbsp;12</b></p>
        </div>
      </center>
    </div>
  </div>


  <div class="button2_text1"><b>Properties of Multiples</b></div>
    <div class="button2_text2">
      <ul class="fa-ul">
        <li> <i class="fa fa-star" aria-hidden="true"></i> <b class="button2_text2_1">Every number is a multiple of itself</b> </li>
      </ul>
      <br>
      <b class="button2_text2_2"><i>i.e.</i></b> <b class="button2_text2_3">1 &nbsp&nbsp&nbsp&nbsp;x&nbsp&nbsp&nbsp&nbsp 15 &nbsp&nbsp&nbsp&nbsp; = &nbsp&nbsp&nbsp&nbsp;15</b></div>
    <br>
    <div class="button2_text3">
      <ul class="fa-ul">
        <li> <i class="fa fa-star" aria-hidden="true"></i> <b class="button2_text3_1">The least multiple of a number is number itself</b>     </li>
      </ul>
      <b class="button2_text3_2">1 &nbsp&nbsp&nbsp&nbsp;x&nbsp&nbsp&nbsp&nbsp 15 &nbsp&nbsp&nbsp&nbsp; = &nbsp&nbsp&nbsp&nbsp;15</b> <b class="button2_text3_3"><i>least multiple</i></b> <br>
      <b class="button2_text3_4">2 &nbsp&nbsp&nbsp&nbsp;x&nbsp&nbsp&nbsp&nbsp 15 &nbsp&nbsp&nbsp&nbsp; = &nbsp&nbsp&nbsp&nbsp;30</b><br>
      <b class="button2_text3_5">3 &nbsp&nbsp&nbsp&nbsp;x&nbsp&nbsp&nbsp&nbsp 15 &nbsp&nbsp&nbsp&nbsp; = &nbsp&nbsp&nbsp&nbsp;45</b><br>
      <b class="button2_text3_6">4 &nbsp&nbsp&nbsp&nbsp;x&nbsp&nbsp&nbsp&nbsp 15 &nbsp&nbsp&nbsp&nbsp; = &nbsp&nbsp&nbsp&nbsp;60</b><br>
    </div>
    <div class="button3_text3_7 well well-lg"<b>Every multiple of a number is completely divisible by that number</b> </div>
  <div class="button3_text3_8">
    <ul class="fa-ul">
      <li> <i class="fa fa-star" aria-hidden="true"></i><b class="abcdefg">Every number is a multiple of 1</b> </li>
    </ul>
  </div>
  <div class="button3_text3_9">
    <ul class="fa-ul">
      <li> <i class="fa fa-star" aria-hidden="true"></i>
        <div class="abcdef">There is no end to multiples of a number, hence there is no highest multiple of a number.</div>
      </li>
    </ul>
  </div>
</div>
</div>
 </div>
 <div class="footer">
<div class="col-md-3 col-xs-3"></div>
<div class="col-md-3 col-xs-3"></div>
<div class="col-md-6 col-xs-6">
  <button class="btn btn-default .btn-lg text-break third-button">Click to get next content</button>
   </div>
  </div>
</div>
<div id="warning-message"> this website is only viewable in landscape mode     </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

只需将$(".first-button").blur(); 或$(this).blur(); 添加到您的点击函数中，以便在按钮获得焦点时取消焦点（如按钮的点击事件）。示例：

$(".first-button").click(function(){
   ...all your code...
   $(".first-button").blur(); //or '$(this).blur();' instead
   setTimeout(function(){ $(".third-button").focus(); }, 3000);
}

查看Fiddle here

我只为first-button做过，你也可以为第二个做同样的事情。

更新： 由于您的 third-button 需要一些时间才能淡入，您可以添加一个 setTimeout() 大约 3 秒，然后将其重点放在第三个。小提琴更新

【讨论】：

感谢您的回答，但这只是我解决方案的一半，我使用了模糊功能并将焦点放在第三个按钮上，但焦点无法正常工作。
我可以看到 $(this).focus(); 在 $(".first-button").click(function() 里面你不需要在那里使用焦点，你需要在那里 blur()。有什么理由需要它吗？在答案中检查我的小提琴
没有$(this).focus();取而代之的是 $('.third-button').focus();因为我希望在使用空格键时点击我的第三个按钮
在上述情况下，当您单击“介绍”按钮然后按空格“单击以获取下一个内容”将被自动调用。无需在任何地方使用focus()。
是的，当您首先使用blur() 时，这会自动发生，无需在第三个按钮上使用focus()。尝试按空格并检查