javascriptのキー押下でキーを無効にするにはどうすればよいですか？

Question

これはコードが動作する方法です。左キーボタン（e.keyCode = 39）を押すと、次のページにジャンプします。全体として、私のプログラムには7（$（ '＃btn-group input'）。length）のページがあります。私はpreventDefault（）を使って試しました。コメントは私が帽子をここに置くことを知らないという条件の中でコマンドを実行しますが、私のプログラムでは動作しません（8ページにジャンプして7ページに戻ります）。あなたは要素のキー操作でこの関数を呼び出すことができ

document.onkeydown = checkKey; 
 

 
function checkKey(e) { 
 

 
    e = e || window.event; 
 

 
    if (e.keyCode == '39') { 
 

 
    var old_num = $('#btn-group').find('.active-btn').val(); 
 
    var new_num = +old_num + 1; 
 

 
    $('#page' + old_num).toggle('slide', { 
 
     direction: 'left', 
 
     complete: function() { 
 
     $('#btn_page' + old_num).removeClass('active-btn'); 
 
     $('#page' + old_num).clearQueue(); 
 
     $('#page' + old_num).removeClass('active-page'); 
 

 
     $('#page' + new_num).addClass('active-page'); 
 
     $('#btn_page' + new_num).addClass('active-btn'); 
 

 
     if (new_num == $('#btn-group input').length) { 
 
      // i dont know what will put here 
 
     } 
 

 
     $('#page' + new_num).toggle('slide', { 
 
      direction: 'right' 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
}

<div class="pull-right" id="btn_all"> 
 
\t <input class="btn active-btn" type="button" id="prev_btn" style="background-color:#66cdaa" style="width:70px;margin:1em" value="Prev."> 
 
\t <div class="btn-group" id="btn-group"> 
 
\t <br> 
 
<input class="btn butt active-btn" type="button" id="btn_page1" style ="background-color:#66cdaa" value="1"> 
 
<input class="btn butt" type="button" id="btn_page2" style ="background-color:#66cdaa" value="2"> 
 
<input class="btn butt" type="button" id="btn_page3" style ="background-color:#66cdaa" value="3"> 
 
<input class="btn butt" type="button" id="btn_page4" style ="background-color:#66cdaa" value="4"> 
 
<input class="btn butt" type="button" id="btn_page5" style ="background-color:#66cdaa" value="5"> 
 
<input class="btn butt" type="button" id="btn_page6" style ="background-color:#66cdaa" value="6"> 
 
<input class="btn butt" type="button" id="btn_page7" style ="background-color:#66cdaa" value="7"> 
 
<input class="btn butt active-btn" type="button" style ="background-color:#66cdaa" id="next_btn" value="Next"> 
 
</div>

Answer 1

ありがとうございます。

function ValidateClientname(e, t) { 
    try { 
     if (window.event) { 
      var charCode = window.event.keyCode; 
     } else if (e) { 
      var charCode = e.which; 
     } else { 
      return true; 
     } 
     alert (charCode); // this will give you key value and you can pass it in if statement like if ((charCode > 47 && charCode < 58) || (charCode ==8)) 
     if ((charCode > 47 && charCode < 58)) 
      return true; 
     else 
      return false; 
    } catch (err) { 
     alert(err.Description); 
    } 
} 

Answer 2

.toggle機能に到達する前に機能を「短絡」する必要があります。これにより、それ以降のすべての関数の実行が防止されます。

$(function() { 
 

 
    document.onkeydown = checkKey; 
 

 
    function checkKey(e) { 
 

 
    e = e || window.event; 
 

 
    if (e.keyCode == '39') { 
 

 
     var old_num = $('#btn-group').find('.active-btn').val(); 
 
     var new_num = +old_num + 1; 
 
     
 
     // if new number is for a page that doesnt exist 
 
     // short circuit 
 
     if (new_num == $('#btn-group input').length) { 
 
      return false; 
 
     } 
 

 
     $('#page' + old_num).toggle('slide', { 
 
     direction: 'left', 
 
     complete: function() { 
 
      $('#btn_page' + old_num).removeClass('active-btn'); 
 
      $('#page' + old_num).removeClass('active-page'); 
 

 
      $('#page' + new_num).addClass('active-page'); 
 
      $('#btn_page' + new_num).addClass('active-btn'); 
 

 
      $('#page' + new_num).toggle('slide', { 
 
      direction: 'right' 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    } 
 
});

.active-btn { 
 
    background-color: red !important; 
 
} 
 

 
.page { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="pull-right" id="btn_all"> 
 
    <input class="btn active-btn" type="button" id="prev_btn" style="background-color:#66cdaa" style="width:70px;margin:1em" value="Prev."> 
 
    <div class="btn-group" id="btn-group"> 
 
    <input class="btn butt active-btn" type="button" id="btn_page1" style="background-color:#66cdaa" value="1" /> 
 
    <input class="btn butt" type="button" id="btn_page2" style="background-color:#66cdaa" value="2" /> 
 
    <input class="btn butt" type="button" id="btn_page3" style="background-color:#66cdaa" value="3" /> 
 
    <input class="btn butt" type="button" id="btn_page4" style="background-color:#66cdaa" value="4" /> 
 
    <input class="btn butt" type="button" id="btn_page5" style="background-color:#66cdaa" value="5" /> 
 
    <input class="btn butt" type="button" id="btn_page6" style="background-color:#66cdaa" value="6" /> 
 
    <input class="btn butt" type="button" id="btn_page7" style="background-color:#66cdaa" value="7" /> 
 
    <input class="btn butt active-btn" type="button" style="background-color:#66cdaa" id="next_btn" value="Next" /> 
 
    </div> 
 
</div> 
 
<div id="pages_all"> 
 
    <div id="page1" class="page active-page" style="display:block">Page 1</div> 
 
    <div id="page2" class="page">Page 2</div> 
 
    <div id="page3" class="page">Page 3</div> 
 
    <div id="page4" class="page">Page 4</div> 
 
    <div id="page5" class="page">Page 5</div> 
 
    <div id="page6" class="page">Page 6</div> 
 
    <div id="page7" class="page">Page 7</div> 
 
</div>

Answer 3

あなたはこれを試すことができます。

$('.btn').click(function(){ 
 
    $(this).addClass('active-btn').siblings().removeClass('active-btn'); 
 
}); 
 
document.onkeydown = checkKey; 
 

 

 
function checkKey(e) { 
 

 
    e = e || window.event; 
 
    var old_num = parseInt($('#btn-group').find('.active-btn').val()); 
 
    var new_num = old_num+1; 
 
    if (new_num == $('#btn-group input').length) { 
 
     new_num=1; 
 
    } 
 
    if (e.keyCode == '39') { 
 
    $('#page' + old_num).toggle('slide', { 
 
     direction: 'left', 
 
     complete: function() { 
 
     $('#btn_page' + old_num).removeClass('active-btn'); 
 
     $('#page' + old_num).clearQueue(); 
 
     $('#page' + old_num).removeClass('active-page'); 
 
     $('#page' + new_num).addClass('active-page'); 
 
     $('#btn_page' + new_num).addClass('active-btn'); 
 
     
 
     $('#page' + new_num).toggle('slide', { 
 
      direction: 'right' 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
}

.pager:not(:first-child) { display:none;} 
 

 
.butt{background-color:#66cdaa} 
 
.active-btn {background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<p id="page1" class="pager" style="display:inline-block">1</p> 
 
<p id="page2" class="pager">2</p> 
 
<p id="page3" class="pager">3</p> 
 
<p id="page4" class="pager">4</p> 
 
<p id="page5" class="pager">5</p> 
 
<p id="page6" class="pager">6</p> 
 
<p id="page7" class="pager">7</p> 
 
<div class="pull-right" id="btn_all"> 
 
\t <input class="btn active-btn" type="button" id="prev_btn" style="background-color:#66cdaa" style="width:70px;margin:1em" value="Prev."> 
 
\t <div class="btn-group" id="btn-group"> 
 
\t <br> 
 
<input class="btn butt active-btn" type="button" id="btn_page1" value="1"> 
 
<input class="btn butt" type="button" id="btn_page2" value="2"> 
 
<input class="btn butt" type="button" id="btn_page3" value="3"> 
 
<input class="btn butt" type="button" id="btn_page4" value="4"> 
 
<input class="btn butt" type="button" id="btn_page5" value="5"> 
 
<input class="btn butt" type="button" id="btn_page6" value="6"> 
 
<input class="btn butt" type="button" id="btn_page7" value="7"> 
 
<input class="btn butt" type="button" id="next_btn" value="Next"> 
 
</div>

Answer 4

を私はあなただけのキーをテストするためにswitchステートメントを使用することができると思う：

document.onkeydown = (e) => { 
    switch (e.keyCode) { 
     case 37 : 
      prevPage(); break; 
     case 39 : 
      nextPage(); break; 
    } 
} 

私は自分のやっていることを書いています（少なくともあなたがしようとしていると思うもの）、それをインスピレーションとして自由に使用してください。 jQueryのトグルの代わりにCSS3のトランジションを使用します。

const pagesCount = 7; 
 
let currentPage = 1; 
 

 
// ---- Generating buttons and pages 
 
const $btnGroup = $("#btn-group"); 
 
const $pagesContainer = $("#pages"); 
 
for(let i=1; i<=pagesCount; i++){ 
 
\t $pagesContainer.append(`<div class='page'><h2>PAGE ${i}</h2></div>`); 
 
\t $btnGroup.append(`<input type='button' value='${i}'/>`); 
 
} 
 
const $btns = $btnGroup.find("input") 
 
$btns.first().addClass("active"); 
 
const $pages = $(".page"); 
 
$pages.not(":eq(0)").addClass("toRight"); 
 
// ---- End generating buttons 
 

 
$btns.click(function() { 
 
\t currentPage = +$(this).val(); 
 
\t changePage(currentPage); 
 
}); 
 

 
changePage = (pageNum) => { 
 
\t $pages.removeClass("toLeft toRight"); 
 
\t $pages.slice(0, pageNum-1).addClass("toLeft"); 
 
\t $pages.slice(pageNum, pagesCount).addClass("toRight"); 
 
\t updateButtons(); 
 
} 
 

 
updateButtons =() => { 
 
\t $btns.removeClass("active"); 
 
\t $btns.eq(currentPage-1).addClass("active"); 
 
} 
 

 
nextPage =() => { 
 
\t return currentPage===pagesCount ? null : changePage(++currentPage); 
 
\t 
 
} 
 

 
prevPage =() => { 
 
\t return currentPage===1 ? null : changePage(--currentPage); 
 
} 
 

 
document.onkeydown = (e) => { 
 
    \t switch (e.keyCode) { 
 
\t \t case 37 : 
 
\t \t \t prevPage(); break; 
 
\t \t case 39 : 
 
\t \t \t nextPage(); break; 
 
    \t } 
 
} 
 

 
$("#prev_btn").click(prevPage); 
 
$("#next_btn").click(nextPage);

#pages { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 
#pages .page { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #000; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
#pages .page:nth-child(even) { 
 
    background: #008000; 
 
} 
 
#pages .page:nth-child(odd) { 
 
    background: #00f; 
 
} 
 
#pages .page.toLeft { 
 
    -webkit-transform: translateX(-100%); 
 
      transform: translateX(-100%); 
 
} 
 
#pages .page.toRight { 
 
    -webkit-transform: translateX(100%); 
 
      transform: translateX(100%); 
 
} 
 
#pages .page h2 { 
 
    color: #fff; 
 
} 
 
nav { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    width: 400px; 
 
} 
 
nav input { 
 
    background-color: #66cdaa; 
 
} 
 
nav #btn-group input { 
 
    margin: 0 5px; 
 
} 
 
nav #btn-group input.active { 
 
    background: #00f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pages"></div> 
 

 
<nav> 
 
\t <input class="btn active-btn" type="button" id="prev_btn" value="Prev."> 
 

 
\t <div id="btn-group"></div> 
 

 
\t <input class="btn butt active-btn" type="button" id="next_btn" value="Next"> 
 
</nav>

一つでもリボンを形成し、すべてのページが行になります解決策を想像し、改ページボタンがちょうど表示するには、適切な場所に全体のリボンを翻訳します正しいページtransform : translateX(n%)

私はそれが役に立ちそうです。