JQuery সহ কীবোর্ড শর্টকাট


185

কেউ যদি চিঠিটি টিপায় তবে আমি কীভাবে একটি ঘটনাকে গুলি করতে পারি g?

(বিটিডাব্লু সমস্ত অক্ষরের অক্ষরের মানচিত্র কোথায়?)


3
এই উত্কৃষ্ট সাইটের সমস্ত অক্ষরের জন্য চরিত্রের মানচিত্র: rmhh.co.uk/ascii.html
ট্রেভর

কী কোডগুলির জন্য আর একটি দরকারী সাইট হ'ল keycode.info
এনপ্যাড

উত্তর:


142

যেহেতু এই প্রশ্নটি প্রাথমিকভাবে জিজ্ঞাসা করা হয়েছিল, জন রেসিগ (jQuery এর প্রাথমিক লেখক) জেএস-হটকি প্রকল্পটি কাঁটাচামচ এবং উন্নত করেছে। তার সংস্করণটি এখানে পাওয়া যায়:

http://github.com/jeresig/jquery.hotkeys


6
এটি metaকীটি সমর্থন করে , এমন কিছু যা js-hotkeys:) সমর্থিত নয় :) ধন্যবাদ
লিপিস

তার একটি নুগেট প্যাকেজ রয়েছে, তাই আমি এইটি দিয়ে গেলাম।
সারিবদ্ধ

আমার অবশ্যই বলতে হবে, কী-সংমিশ্রণের জন্য এটি খুব ভাল (বিশেষত সেই বিশেষ কীগুলি যেমন শিফট, সিটিআরএল, ওএল, ...) তবে আমি বেসিক ম্যাপিং 0-9 এবং এজে নিয়ে সমস্যায় পড়ছি)।
মার্টিন

1
এই উত্তর দরকারী লিঙ্ক দেয়। আপনি কি মূল প্রশ্নের উত্তর দিতে পারবেন? উদাহরণস্বরূপ "কেউ যদি g চিঠিটি টিপায় তবে আমি কীভাবে একটি ঘটনাকে গুলি করতে পারি?" Jquery.hotkeys মডিউলটির কিছু ডকুমেন্টেশন রয়েছে, যা আমি নিশ্চিত যে আপনি কী করছেন তা যদি আপনি ইতিমধ্যে জেনে থাকেন তবে ... তবে আমাদের মধ্যে যারা একসাথে কিছু হ্যাক করার চেষ্টা করছেন, তাদের মূল প্রশ্নের উত্তরটি দুর্দান্ত হবে।
আয়ান ল্যাংমোর

আপনি কীভাবে ব্রাউজারে ডিফল্ট বুদবুদ প্রতিরোধ করবেন? আমি যা দেখছি তা থেকে রেডমি তে কিছুই উল্লেখ করা হয়নি।
গার্নার্ড

85

JQuery হটকিজ সম্পর্কে কী ?

jQuery হটকিজ আপনাকে প্রায় কোনও কী সংমিশ্রণ সমর্থন করে আপনার কোডের যে কোনও জায়গায় কীবোর্ড ইভেন্টগুলি দেখতে দেয়।

একটি ফাংশন ( ) তে Ctrl+ বাঁধাই , উদাহরণস্বরূপ:cf

$(document).bind('keydown', 'ctrl+c', f);

2
বাহ ... এটি সম্ভবত আমি সবচেয়ে সহজ প্লাগইন ব্যবহার করেছি!
d -_- বি

বাক্সের বাইরে এটি নিয়ে কাজ করা ব্রাউজারের ডিফল্টগুলি রোধ করে না। সুতরাং Ctrl + n উদাহরণস্বরূপ ব্রাউজারে একটি নতুন ট্যাব খুলবে। ইভেন্ট অবজেক্টে কোনও অ্যাক্সেস নেই তাই কীভাবে এটির সাথে ডিফল্ট প্রতিরোধ করা যায় তা নিশ্চিত নন।
গার্নার্ড

@ গারনার্ড আমাদের সম্ভবত ব্যবহারকারীের ডিফল্টগুলি রোধ করা উচিত নয়, বিরল ক্ষেত্রে ব্যতীত যেখানে এটি ব্যবহারকারীকে আগেই জানানো হয়েছিল এবং তারা ওয়েব অ্যাপের মধ্যে এই আচরণটি প্রত্যাশা করছেন (এবং সম্ভবত এটির পরিবর্তনের জন্য তাদের একটি সেটিংস সরবরাহ করবে) .. অন্যথায় এটি অবিশ্বাস্যরকম বিরক্তিকর। উদাহরণ 1 : যখন স্ট্যাক এক্সচেঞ্জ একটি পোস্ট রচনা এবং পরিবর্তে ব্রাউজার গোপন, উঠলে Cmd এইচ তোলে ## Heading ##টেক্সট ক্ষেত্রের প্রদর্শিত হয়। উদাহরণ 2 : এই প্রশ্ন। উদাহরণ 3 : এই প্রশ্নোত্তর
মানসিকবিদ 10'19

2
@ মানসিকবিদ আমি ইউএক্স মন্তব্যের প্রশংসা করি তবে এটি আমাদের বর্তমান পরিস্থিতিতে প্রযোজ্য নয়। আমি কেবল প্রযুক্তিগতভাবে এটি করতে সক্ষম হতে চাই আর্কিটেকচারাল এবং ইউএক্স সিদ্ধান্ত অন্য পোস্ট হবে :-)
গার্নার্ড

43

আমি সম্প্রতি এটির জন্য একটি স্বতন্ত্র গ্রন্থাগার লিখেছিলাম। এটি jQuery প্রয়োজন হয় না, কিন্তু আপনি jQuery কোন সমস্যা নেই সঙ্গে এটি ব্যবহার করতে পারেন। একে মাউসট্র্যাপ বলে।

আপনি http://craig.is/killing/mice এ এটি পরীক্ষা করে দেখতে পারেন


4
এই খুব সুন্দর. আমি কীগুলির ক্রম পরিচালনা করার জন্য সমর্থনটি সত্যই প্রশংসা করি।
lorefnon

2
আমি মাউসট্র্যাপ ব্যবহার করছি এবং এটি হটকি প্লাগইন থেকে আরও ভাল। খুব প্রস্তাবিত। @ ক্রাগ ধন্যবাদ ভাল কাজের জন্য।
প্রিমোজ রোম

1
আমি ডকুমেন্টেশন পাশাপাশি উপাদানগুলির ডিফল্ট আচরণ রোধ করার উপায় পছন্দ করি। এই গ্রন্থাগারটি নুগেটে থাকা উচিত।
আমির

একমত। এটি উচ্চতর। যখন টেক্সারিয়া আমার দিকে মনোনিবেশ করেছিল তখন jquery.hotkey ভুলভাবে গুলি চালাচ্ছিল না, তবে এটি হয়নি। পূর্ববর্তী মন্তব্যকারীরা যেভাবে উল্লেখ করেছেন সেগুলিও এটি ভাল।
erosebe

24

ওয়েল অনেক উপায় আছে। তবে আমি অনুমান করছি যে আপনি একটি উন্নত বাস্তবায়নে আগ্রহী। কয়েক দিন আগে আমি একই সন্ধানে ছিলাম এবং আমি একটি পেয়েছি।

এখানে.

এটি কীবোর্ড থেকে ইভেন্টগুলি ক্যাপচারের জন্য ভাল এবং আপনি চরিত্রের মানচিত্রগুলিও খুঁজে পাবেন। এবং ভাল জিনিস হ'ল ... এটি jQuery। একই পৃষ্ঠায় ডেমো পরীক্ষা করে সিদ্ধান্ত নিন।

একটি বিকল্প গ্রন্থাগার এখানে আছে


2
কেবল এটি পরিষ্কার করার জন্য, এটি jquery ছাড়াই নিখুঁতভাবে কাজ করে।
ডিফ থিঙ্কর

16

আপনি যদি কেবল সাধারণ শর্টকাটগুলি চান (যেমন 1 টি অক্ষরের উদাহরণস্বরূপ কেবল g) আপনি অতিরিক্ত প্লাগইন ছাড়াই এটি সহজেই করতে পারেন:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});

2
এটি আই 9 তে কাজ করে না। আইই তে, এর মতো কিছু কাজ করে: e = e || window.event; var keyCode = e.keyCode || e.which;
ব্রেন্ট ফাউস্ট

15
    <script type="text/javascript">
        $(document).ready(function(){
            $("#test").keypress(function(e){
                if (e.which == 103) 
                {
                    alert('g'); 
                };
            });
        });
    </script>

    <input type="text" id="test" />

এই সাইটটি 71 = g বলছে তবে উপরে jQuery কোড অন্যথায় চিন্তা করেছে

মূলধন জি = 71 , ছোট হাতের অক্ষর 103


8
এটা ব্যবহার কর! if (e. which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
ট্রিপ

এটি কেবল তখনই সুখী হয় যখন আপনি পাঠ্য ক্ষেত্রে মনোনিবেশ করেন
মাইকেল কোপার

লিঙ্কটি মারা গেছে :(


3

কোডাক্যাডেমিতে কিছু jQuery অধ্যয়ন করার পরে আমি অ্যানিমেট সম্পত্তিটির সাথে একটি কী বাঁধাইয়ের সমাধান পেয়েছি। পুরো ধারণাটি ছিল একটি বিভাগ থেকে অন্য বিভাগে ঝাঁপুনির জন্য স্ক্রোল না করে অ্যানিমেট করা। কোডাকাদেমির উদাহরণটি হ'ল মারিওকে ডিওএমের মাধ্যমে স্থানান্তরিত করা কিন্তু আমি এটি আমার ওয়েবসাইট বিভাগগুলির জন্য প্রয়োগ করেছি (100% উচ্চতা সহ সিএসএস)। এখানে কোডের একটি অংশ রয়েছে:

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 39:
            $('section').animate({top: "-=100%"}, 2000);
            break;
        case 37:
            $('section').animate({top: "+=100%"}, 2000);
            break;
        default:
            break;
    }
});

আমি মনে করি আপনি এটি কোনও চিঠি এবং সম্পত্তির জন্য ব্যবহার করতে পারেন।

সূত্র: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

হটকিএস.জেএস এর একটি নতুন সংস্করণ রয়েছে যা jQuery এর 1.10+ সংস্করণে কাজ করে। এটি ছোট, 100 লাইনের জাভাস্ক্রিপ্ট ফাইল। 4 কেবি বা মাত্র 2 কেবি মিনিড করা হয়েছে। এখানে কয়েকটি সাধারণ ব্যবহারের উদাহরণ রয়েছে:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
            doSomethingWithaParameter('Daniel');
        });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

গিথুব থেকে রেপোটি ক্লোন করুন: https://github.com/realdanielbyrne/HoyKeys.git বা গিথুব রেপো পৃষ্ঠা https://github.com/realdanielbyrne/HoyKeys বা কাঁটাচামড়াতে যান এবং অবদান রাখুন।



1

আমি আপনাকে কী প্রেস বানিয়েছি! আমার কোডটি এখানে:

<h1>Click inside box and press the g key! </h1>
 <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
<script>

 shortcut.add("g",function() {
	alert("Here Is Your event! Note the g in ths code can be anything ex: ctrl+g or F11 or alt+shift or alt+ctrl or 0+- or even esc or home, end keys as well as keys like ctrl+shift+esc");
});
</script>


0

আমি ঠিক একই জিনিসটি করার চেষ্টা করছিলাম, আমি এটি দীর্ঘদিন পরে সম্পন্ন করেছি! এখানে আমি ব্যবহার করে শেষ কোডটি! এটি কাজ করে: পারফেক্ট! শর্টকাট.জেএস লাইব্রেরি ব্যবহার করে এটি করা হয়েছিল ! উদাহরণস্বরূপ কয়েকটি অন্যান্য কী প্রেস যোগ করলেন!

কেবল কোড স্নিপ-ইট চালান, ভিতরে বক্সটি ক্লিক করুন এবং Gকী টিপুন!

নোটটি নোট করুন ctrl+Fএবং meta+Fএটি সমস্ত অক্ষম করবে keyboard shortcutsযাতে আপনাকে একই স্ক্রিপ্টে কীবোর্ড শর্টকাটও তৈরি করতে হবে! এছাড়াও keyboard shortcutকর্ম শুধুমাত্র বলা যেতে পারে javascript!

এইচটিএমএল রূপান্তর করতে javascript , phpঅথবা ASP.netযেতে এখানে ! keyboard shortcutsলাইভ জেএসএফআইডিএলএলতে আমার সমস্ত দেখতে এখানে ক্লিক করুন!

হালনাগাদ

    <h1>Click inside box and press the <kbd>G</kbd> key! </h1>
     <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
    <script>

     shortcut.add("g",function() {
        alert("Here Is Your event from the actual question! This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+g",function() {
        alert("Here Is Your event from the actual question accept it has ctrl + g instead!! This Is where you replace the command here with your command!");
shortcut.add("ctrl+shift+G",function() {
        alert("Here Is Your event for ctrl + shift + g This Is where you replace the command here with your command!");
    });
shortcut.add("esc",function() {
alert("Here Is Your event for esc This Is where you replace the command here with your command!");
    });
//Some MAC Commands
shortcut.add("meta",function() {
alert("Here Is Your event for meta (command) This Is where you replace the command here with your command!");
    });
shortcut.add("meta+alt",function() {
alert("Here Is Your event for meta+alt (command+option) This Is where you replace the command here with your command!");
    });
    </script>
shortcut.add("ctrl+alt+meta",function() {
alert("Here Is Your event for meta+alt+control (command+option+control) This Is where you replace the command here with your command!");
    });
//& =shift +7
shortcut.add("meta+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for meta+alt (command+option+more!) This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for ctrl+alt+More!!! This Is where you replace the command here with your command!");
    });
//Even try the F keys so on laptop it would be Fn plus the F key so in my case F5!
shortcut.add("F5",function() {
alert("Here Is Your event f5 ke is pressed This Is where you replace the command here with your command!");
    });
//Extra...My Favourite one: CTRL+F
<script>
//Windows

 shortcut.add("Ctrl+F",function() { //change to meta+F for mac!
    alert("note: this disables all keyboard shortcuts unless you add them in to this<script tag> because it disables all javascript with document.write!");

document.writeln(" <link href=\"https://docs.google.com/static/document/client/css/3164405079-KixCss_ltr.css\" type=\"text/css\" rel=\"stylesheet\"> ");
document.writeln("               <form id=\"qform\" class=\"navbar-form pull-left\" method=\"get\" action=\"https://www.google.com/search\" role=\"search\"> "); 
document.writeln("  ");
document.writeln("  ");

document.writeln(" <input type=\"hidden\" name=\"domains\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> "); 
document.writeln("              <input type=\"hidden\" name=\"sitesearch\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> ");

document.writeln(" <div id=\"docs-findbar-id\" class=\"docs-ui-unprintable\"name=\"q\" type=\"submit\"><div class=\"docs-slidingdialog-wrapper\"><div class=\"docs-slidingdialog-holder\"><div class=\"docs-slidingdialog\" role=\"dialog\" tabindex=\"0\" style=\"margin-top: 0px;\"><div id=\"docs-slidingdialog-content\" class=\"docs-slidingdialog-content goog-inline-block\"><div class=\"docs-findbar-content\"><div id=\"docs-findbar-spinner\" style=\"display: none;\"><div class=\"docs-loading-animation\"><div class=\"docs-loading-animation-dot-1\"></div><div class=\"docs-loading-animation-dot-2\"></div><div class=\"docs-loading-animation-dot-3\"></div></div></div><div id=\"docs-findbar-input\" class=\"docs-findbar-input goog-inline-block\"><table cellpadding=\"0\" cellspacing=\"0\" class=\"docs-findinput-container\"><tbody><tr><td class=\"docs-findinput-input-container\"><input aria-label=\"Find in document\" autocomplete=\"on\" type=\"text\" class=\"docs-findinput-input\" name=\"q\" type=\"submit\"  placeholder=\"Search Our Site\"></td><td class=\"docs-findinput-count-container\"><span class=\"docs-findinput-count\" role=\"region\" aria-live=\"assertive\" aria-atomic=\"true\"></span></td></tr></tbody></table></div><div class=\"docs-offscreen\" id=\"docs-findbar-input-context\">Context:<div class=\"docs-textcontextcomponent-container\"></div></div><div role=\"button\" id=\"docs-findbar-button-previous\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled\" aria-label=\"Previous\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"docs-findbar-button-next\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled\" aria-label=\"Next\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow\" tabindex=\"0\" data-tooltip=\"More options\" aria-label=\"\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div></div></div><div class=\"docs-slidingdialog-close-container goog-inline-block\"><div class=\"docs-slidingdialog-button-close goog-flat-button goog-inline-block\" aria-label=\"Close\" role=\"button\" aria-disabled=\"false\" tabindex=\"0\" style=\"user-select: none;\"><div class=\"goog-flat-button-outer-box goog-inline-block\"><div class=\"goog-flat-button-inner-box goog-inline-block\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\"></div></div></div></div></div></div></div><div tabindex=\"0\" style=\"position: absolute;\"></div></div></div></div> ");
document.writeln(" <a href=\"#\" onClick=\"window.location.reload();return false;\"></a> "); 
document.writeln("  ");
document.writeln("                </form> "); 
document.writeln("  ");
document.writeln(" <h1> Press esc key to cancel searching!</h1> ");
  document.addEventListener('contextmenu', event => event.preventDefault());


  shortcut.add("esc",function() {
    alert("Press ctrl+shift instead!");
  location.reload();

  
});
});
</script>
 
// put all your other keyboard shortcuts again below this line!

//Another Good one ...Ctrl+U Redirect to alternative view source! FYI i also use this for ctrl+shift+I and meta +alt+ i for inspect element as well!
  shortcut.add("meta+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
 shortcut.add("ctrl+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
    </script>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.