作成しているWebサイトにショートカットを作成しようとしています。私はこの方法でできることを知っています:
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert('CTRL+S COMBO WAS PRESSED!')
//run code for CTRL+S -- ie, save!
e.preventDefault();
}
しかし、次の例は簡単でコードが少なくなりますが、コンボキー押下イベントではありません。
$(document).keypress("c",function() {
alert("Just C was pressed..");
});
したがって、この2番目の例を使用して、次のようなことができるかどうかを知りたいと思います。
$(document).keypress("ctrl+c",function() {
alert("Ctrl+C was pressed!!");
});
これは可能ですか?私はそれを試してみましたがうまくいきませんでしたが、何が間違っていますか?
.ctrlKey
のプロパティを渡すだけの別のアプローチ(プラグインは不要)に渡されます イベントオブジェクト 。 Ctrl 次のように、イベント時に押されました:
$(document).keypress("c",function(e) {
if(e.ctrlKey)
alert("Ctrl+C was pressed!!");
});
私はlittleパーティーに遅れていますが、ここに私のパートがあります
$(document).on('keydown', function ( e ) {
// You may replace `c` with whatever key you want
if ((e.metaKey || e.ctrlKey) && ( String.fromCharCode(e.which).toLowerCase() === 'c') ) {
console.log( "You pressed CTRL + C" );
}
});
代わりに Jquery Hotkeys プラグインを試してください-必要なすべてを実行します。
jQuery Hotkeysは、ほとんどすべてのキーの組み合わせをサポートするコード内の任意の場所でキーボードイベントのハンドラーを簡単に追加および削除できるプラグインです。
このプラグインは、Tzury Bar Yochayによるプラグインに基づいています:jQuery.hotkeys
構文は次のとおりです。
$(expression).bind(types, keys, handler); $(expression).unbind(types, handler);
$(document).bind('keydown', 'ctrl+a', fn);
// e.g. replace '$' sign with 'EUR'
// $('input.foo').bind('keyup', '$', function(){
// this.value = this.value.replace('$', 'EUR'); });
使用できません Ctrl+C jQueryによって、ただし shortcut.js
ライブデモ: Abdennour JSFiddle
$(document).ready(function() {
shortcut.add("Ctrl+C", function() {
$('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+C");
});
shortcut.add("Ctrl+V", function() {
$('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+V");
});
shortcut.add("Ctrl+X", function() {
$('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+X");
});
});
.keypress()で動作させることはできませんでしたが、次のように.keydown()関数で動作しました:
$(document).keydown(function(e) {
if(e.key == "c" && e.ctrlKey) {
console.log('ctrl+c was pressed');
}
});
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
var ctrlMode = false; // if true the ctrl key is down
///this works
$(document).keydown(function(e){
if(e.ctrlKey){
ctrlMode = true;
};
});
$(document).keyup(function(e){
ctrlMode = false;
});
</script>
2019年以降、これは機能します(Chrome少なくとも)
$(document).keypress(function(e) {
var key = (event.which || event.keyCode) ;
if(e.ctrlKey) {
if (key == 26) { console.log('Ctrl+Z was pressed') ; }
else if (key == 25) { console.log('Ctrl+Y was pressed') ; }
else if (key == 19) { console.log('Ctrl+S was pressed') ; }
else { console.log('Ctrl', key, 'was pressed') ; }
}
});
$(window).keypress("c", function(e) {
if (!e.ctrlKey)
return;
console.info("CTRL + C detected !");
});
$(window).keypress("c", function(e) {
if (!e.ctrlKey)
return;
$("div").show();
});
/*https://Gist.github.com/jeromyanglim/3952143 */
kbd {
white-space: nowrap;
color: #000;
background: #eee;
border-style: solid;
border-color: #ccc #aaa #888 #bbb;
padding: 2px 6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
background-color: #FAFAFA;
border-color: #CCCCCC #CCCCCC #FFFFFF;
border-style: solid solid none;
border-width: 1px 1px medium;
color: #444444;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
font-size: 11px;
font-weight: bold;
white-space: nowrap;
display: inline-block;
margin-bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display:none">
<kbd>CTRL</kbd> + <kbd>C</kbd> detected !
</div>
私の場合、キーダウンctrlキーとクリックイベントを探していました。私のjqueryは次のようになります:
$('.linkAccess').click( function (event) {
if(true === event.ctrlKey) {
/* Extract the value */
var $link = $('.linkAccess');
var value = $link.val();
/* Verified if the link is not null */
if('' !== value){
window.open(value);
}
}
});
ここで、「linkAccess」は、リンクがあり、キーとクリックの組み合わせを使用してアクセスしたい特定のフィールドのクラス名です。