私のウェブページには6つのリンクがあり(他には何もありません)、それぞれに1から6まで番号を付けたいと思います。クライアントにCtrlキーやAltキーなどを使わずに対応する数字キーを押してもらうと便利です。
これは可能ですか?jqueryまたは他のhtmlスクリプトでの最良のアプローチは何でしょうか?
私のウェブページには6つのリンクがあり(他には何もありません)、それぞれに1から6まで番号を付けたいと思います。クライアントにCtrlキーやAltキーなどを使わずに対応する数字キーを押してもらうと便利です。
これは可能ですか?jqueryまたは他のhtmlスクリプトでの最良のアプローチは何でしょうか?
jQueryの1つのバージョンは次のとおりです。
$(document).ready(function() {
$("body").keypress(function(event) {
var link = "#link";
if(event.keyCode == 49) link += 1;
if(event.keyCode == 50) link += 2;
if(event.keyCode == 51) link += 3;
if(event.keyCode == 52) link += 4;
if(event.keyCode == 53) link += 5;
if(event.keyCode == 54) link += 6;
if(link != "#link") $(link).trigger("click");
});
});
altキーまたはctrlキーを使用せずにこれを実行する場合は、JavaScriptが必要です。イベントリスターをhtmlまたはbodyタグに添付して、keypressイベントをリッスンすることができます。複雑な「if」ステートメントは使用しないでください。これは必要ありません。これは次のようにエレガントにすることができます(jQueryを使用):
<a href="http://domain1.com" code="1">link1</a>
<a href="http://domain2.com" code="2">link2</a>
etc
$('body').keypress(function(e) {
$('[code=' + String.fromCharCode(e.keyCode-48) + ']').click();
});
ctrl / altキーを使用すると、accesskey html属性を使用できます:http://reference.sitepoint.com/html/a/accesskey
コントロール+キーなし:クエリでイベントリスナーをキープレスし、ボタンごとに特定のキーコードをリッスンします。
コントロール+キー付き:アクセスキーを使用できます(http://www.cs.tut.fi/~jkorpela/forms/accesskey.html)
$('body').bind('keypress', function(e) {
if(e.keyCode==49){ // number 1 on the keyboard been pressed
$('firstHref').click();
} else if(e.keyCode==50) { // number 2
$('secondHref').click();
} else if(e.keyCode==51) { // number 3
$('thirdHref').click();
}else if(e.keyCode==52) { // number 4
$('fourthHref').click();
}else if(e.keyCode==53) { // number 5
$('fiveHref').click();
}else if(e.keyCode==54) { // number 6
$('sixHref').click();
}
});
次のようなことを試すことができます:リンク(実行ボタンをクリックしてから、[結果]ボックスの内側をクリックしてから、無感覚なキーを押します。
$('body').bind('keypress', function(e) {
if(e.keyCode==49){ // 1
alert('1 key pressed');
window.location = "http://www.stackoverflow.com/"
}
if(e.keyCode==50){ // 2
alert('2 key pressed');
window.location = "http://jsfiddle.net/"
}
if(e.keyCode==51){ // 3
alert('3 key pressed');
window.location = "http://www.google.com/"
}
if(e.keyCode==52){ // 4
alert('4 key pressed');
window.location = "http://www.stackoverflow.com/"
}
if(e.keyCode==53){ // 5
alert('5 key pressed');
window.location = "http://jsfiddle.net/"
}
if(e.keyCode==54){ // 6
alert('6 key pressed');
window.location = "http://www.google.com/"
}
});