gpt4 book ai didi

javascript - 如何调整空格键和输入仅适用于第三个按钮而不适用于任何其他按钮?

转载 作者:行者123 更新时间:2023-11-28 02:49:44 24 4
gpt4 key购买 nike

https://jsfiddle.net/ffkwgddL/

我的代码中有三个按钮,第一个按钮,第二个按钮和第三个按钮,如果我单击第一个按钮,即介绍,然后按空格键,它再次工作,因为我单击了第一个按钮,但如果我单击第一个按钮然后是第三个按钮,即单击以获取下一个内容,然后按空格键,就像我单击第三个按钮一样。我希望空格键和回车键仅适用于第三个按钮而不适用于任何其他按钮,抱歉我的 fiddle 看起来不太好,因为它仅适用于横向 View 。

<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>

最佳答案

只需将 $(".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 秒,然后将其聚焦在第三个按钮上。 fiddle 更新

关于javascript - 如何调整空格键和输入仅适用于第三个按钮而不适用于任何其他按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39872393/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com