ডিআইভি উপাদানটিতে কী প্রেস (বা কীডাউন) ইভেন্ট ক্যাপচার করুন

Question

কীভাবে আপনি ডিআইভি উপাদান (jQuery ব্যবহার করে) কীপ্রেস বা কী ডাউন ইভেন্টটিকে আটকাবেন?

ডিআইভি উপাদান ফোকাস দিতে কি প্রয়োজন?

Comments

ডিভের জন্য "ফোকাস" এর অর্থ কী?

— জোনাথন ফাউস্ট

এটিতে ট্যাবডেক্স থাকা অবস্থায় jboyd এটিতে ট্যাবিং করা ছাড়াও আপনি এটি খুঁজে পেতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন এবং এতে ফোকাস পদ্ধতিটি কল করতে পারেন।

— ব্রেন্ডন এনরিক

@ লালচাঁদ ... আপনি কি আমার উত্তর কিছুতেই মেনে নিতে পারবেন? :)

— হেলি

Answer 1

(1) tabindexবৈশিষ্ট্যটি সেট করুন :

<div id="mydiv" tabindex="0" />

(২) কীডাউন থেকে আবদ্ধ:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

শুরুতে ফোকাস সেট করতে:

$(function() {
   $('#mydiv').focus();
});

অপসারণ করতে - যদি আপনি এটি পছন্দ করেন না - divফোকাস সীমানা, সেট করুনoutline: none করুন।

আরও সম্ভাবনার জন্য কীকোডগুলির সারণীটি দেখুন keyCode।

সমস্ত কোড আপনি ধরে নিয়েছেন jQuery।

#

Comments

ডিভকে 'নির্বাচনযোগ্য' করতে এখানে মূল পয়েন্ট +1 ট্যাবিনডেক্স জিকুয়েরি প্রয়োজনীয় নয়, একই জিনিসটি কৌণিকর পাশাপাশি সেইসাথে জাভাস্ক্রিপ্ট ইভেন্টগুলির সাথে কাজ করে I

— Jukka Dahlbom

এই জন্য ব্রাউজার সমর্থন কি?

— জ্ঞাতসিল্যা

ট্যাবইন্ডেক্স একটি মূল অংশ তবে এটি "0" ব্যতীত অন্য কোনও মানকে সেট করবেন না। 0 এর উপরে যে কোনও কিছু তৈরি করা দৃষ্টিশক্তি প্রতিবন্ধী ব্যবহারকারীদের জন্য পর্দার পাঠকদের গোলমাল করতে চলেছে (এটি পৃষ্ঠায় সমস্ত কিছু এড়িয়ে যাবে এবং সরাসরি 0 এর উপরে যে কোনও ট্যাবিনডেক্সে যাবে)। tabindex = "0" এটিকে "ট্যাববেবল" করে তোলে। আপনার ট্যাবিনডেক্স = "0"

— জুনাবি

<pre> পাশাপাশি কাজ করে!

— dfmiller

অসাধারণ! আমি ট্যাবিনডেক্সের বৈশিষ্ট্যটি অনুপস্থিত ছিলাম, সম্ভবত কোনও কারণেই তাদের ট্যাবডেক্স না থাকলে ডিআইভি'র ফোকাস গ্রহণ করা সম্ভব নয়। ধন্যবাদ মানুষ! আমার জীবন সংরক্ষিত! সম্পাদনা: পাশাপাশি প্রতিক্রিয়া নিয়েও কাজ করে

— ভিনাসিয়াস নেগ্রো

Answer 2

এখানে সরল জেএসের উদাহরণ:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Comments

এটি কীভাবে উত্তর দেয়?

— পল বাক

Answer 3

ট্যাবিনডেক্স এইচটিএমএল বৈশিষ্ট্যটি নির্দেশ করে যে এর উপাদানটি ফোকাস করা যায় এবং যদি / যেখানে এটি অনুক্রমিক কীবোর্ড নেভিগেশন (সাধারণত Tabকী সহ) অংশ নেয়। পূর্ণ রেফারেন্সের জন্য MDN ওয়েব ডক্স পড়ুন ।

জ্যাকুরি ব্যবহার করা হচ্ছে

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

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

<div id="division" tabindex="0"></div>

জাভাস্ক্রিপ্ট ব্যবহার করে

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<div id="division" tabindex="0"></div>

Comments

আমি আসলে এটি ফোকাসআউট ইভেন্টের ফায়ারিংয়ের সাথে একটি সমস্যার সন্ধান করতে দেখেছি যখন ডিভি হারানো ফোকাসের নিয়ন্ত্রণগুলি ডিভস স্ক্রোলবারে ক্লিক করতে বলে, কেবল ডিভটিতে ট্যাবস্টপ যুক্ত করা ঠিক করা ছিল, তাই আপনাকে অনেক ধন্যবাদ

— মাইকটি