বিল্ডিং হলে তথ্য প্রদর্শন করতে বোঝানো একটি ওয়েবপৃষ্ঠা দেখানোর সময় আমি কার্সারটি আড়াল করতে চাই। এটি মোটেই ইন্টারেক্টিভ হতে হবে না। আমি কার্সার সম্পত্তি এবং স্বচ্ছ কার্সার চিত্র দিয়ে চেষ্টা করেছি তবে আমি এটি কার্যকর করি নি।
কেউ কি জানেন যে এটি করা যায় কিনা? আমি মনে করি এটি এমন কোনও ব্যবহারকারীর সুরক্ষা হুমকি হিসাবে বিবেচনা করা যেতে পারে যা তিনি জানেন না যে তিনি কোথায় ক্লিক করছেন, সুতরাং আমি খুব আশাবাদী নই ... ধন্যবাদ!
উত্তর:
সিএসএস সহ:
selector { cursor: none; }একটি উদাহরণ:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>জাভাস্ক্রিপ্টে কোনও উপাদানটিতে এটি সেট করতে, আপনি styleসম্পত্তিটি ব্যবহার করতে পারেন :
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>আপনি যদি এটি পুরো শরীরে সেট করতে চান:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>যদিও আপনি সত্যিই কার্সারটি গোপন করতে চান তা নিশ্চিত করুন। এটি মানুষকে সত্যই বিরক্ত করতে পারে ।
1x1px স্বচ্ছ png বা 1% স্বচ্ছ png ব্যবহার করুন।
document.body.style.cursor = 'auto'।
যদিও cursor: noneসিএসএস সমাধান স্পষ্টভাবে একটি কঠিন এবং সহজ কার্যসংক্রান্ত আপনার প্রকৃত লক্ষ্যে পৌঁছাতে হলে অপসারণ করার সময় আপনার ওয়েব অ্যাপ্লিকেশন ব্যবহার করা হচ্ছে ডিফল্ট কার্সার, অথবা আপনার বাস্তবায়ন নিজের কাঁচা মাউস আন্দোলনের ব্যাখ্যা (FPS যে গেম, উদাহরণস্বরূপ জন্য), আপনি হয়তো পরিবর্তে পয়েন্টার লক এপিআই ব্যবহার করে বিবেচনা করতে চান ।
আপনি কার্সার অপসারণ করতে কোনও উপাদানটিতে অনুরোধপয়েন্টারলকটি ব্যবহার করতে পারেন এবং সমস্ত mousemoveইভেন্টগুলি সেই উপাদানটিতে পুনর্নির্দেশ করতে পারেন (যা আপনি পরিচালনা করতে পারেন বা নাও পরিচালনা করতে পারেন):
document.body.requestPointerLock();লকটি প্রকাশ করতে, আপনি প্রস্থানকর্তা লক ব্যবহার করতে পারেন :
document.exitPointerLock();বাস্তবের জন্য কোনও কার্সার নেই
এটি একটি খুব শক্তিশালী এপিআই কল। এটি কেবল আপনার কার্সরটিকে অদৃশ্য করে না, তবে এটি আসলে আপনার অপারেটিং সিস্টেমের নেটিভ কার্সারটিকে সরিয়ে দেয় । পয়েন্টার লকটি প্রকাশ না হওয়া অবধি ( কিছু ব্রাউজার ব্যবহার করে বা টিপে ) আপনি পাঠ্য নির্বাচন করতে বা আপনার মাউসের সাথে কিছু কিছু করতে পারবেন না (আপনার কোডের কিছু মাউস ইভেন্ট শোনার ব্যতীত )।exitPointerLockESC
অর্থাৎ, কার্সার না থাকায় আপনি উইন্ডোটি আপনার কার্সর দিয়ে আবার দেখাতে পারবেন না।
বিধিনিষেধ
উপরে উল্লিখিত হিসাবে, এটি একটি খুব শক্তিশালী এপিআই কল এবং এটি কেবলমাত্র ক্লিকের মতো ওয়েবে কিছু প্রত্যক্ষ ব্যবহারকারী-কথোপকথনের প্রতিক্রিয়া হিসাবে করা যেতে পারে; উদাহরণ স্বরূপ:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});এছাড়াও, অনুমতি সেট না করা requestPointerLockস্যান্ডবক্সযুক্ত থেকে কাজ করবে না ।iframeallow-pointer-lock
ব্যবহারকারী-বিজ্ঞপ্তিগুলি
কিছু ব্রাউজারগুলি লকটি নিযুক্ত করার আগে ব্যবহারকারীকে একটি নিশ্চিতকরণের জন্য অনুরোধ জানাবে, কেউ কেউ কেবল কোনও বার্তা প্রদর্শন করবে। এর অর্থ কলের পরে পয়েন্টার লকটি এখনই সক্রিয় হবে না। যাইহোক, পয়েন্টার লকিংয়ের আসল অ্যাক্টিভেশনটি pointerchangeযে উপাদানটির requestPointerLockজন্য আহ্বান করা হয়েছিল সে সম্পর্কিত ইভেন্টটি শুনে শোনা যাবে :
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});বেশিরভাগ ব্রাউজার কেবল একবার বার্তা প্রদর্শন করবে তবে ফায়ারফক্স মাঝে মাঝে প্রতিটি কলটিতে বার্তাটি স্প্যাম করবে। আফাইক, এটি কেবল ব্যবহারকারী-সেটিংস দ্বারা কাজ করা যেতে পারে, ফায়ারফক্সে পয়েন্টার-লক বিজ্ঞপ্তি অক্ষম দেখুন ।
কাঁচা মাউস চলাচলের কথা শুনছি
পয়েন্টার লক এপিআই কেবল মাউসটিকে সরিয়ে দেয় না, পরিবর্তে কাঁচা মাউস মুভমেন্ট ডেটাটিকে উপাদানটিতে পুনঃনির্দেশ requestPointerLockকরে। mousemoveইভেন্টটি ব্যবহার করে , তারপরে ইভেন্ট অবজেক্টের বৈশিষ্ট্য movementXএবং movementYবৈশিষ্ট্যগুলিতে অ্যাক্সেসের মাধ্যমে এটি শোনা যায় :
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});আমি স্বচ্ছ * .cur 1px থেকে 1px দিয়ে এটি করেছি তবে এটি ছোট বিন্দুর মতো দেখাচ্ছে। :( আমি মনে করি এটি আমি করতে পারি এটি সেরা ক্রস-ব্রাউজার জিনিস CSS
আপনি যদি এটি সিএসএসে করতে চান:
#ID { cursor: none !important; }!important।
পুরো এইচটিএমএল ডকুমেন্টের জন্য এটি ব্যবহার করে দেখুন
html * {cursor:none}অথবা যদি কিছু সিএসএস আপনার কার্সারটিকে ওভাররাইট করে: কোনটিই ব্যবহার করে না!
html * {cursor:none!important}আপনি যদি পুরো ওয়েবপৃষ্ঠায় কার্সারটি আড়াল করতে চান bodyতবে এটি পুরো দৃশ্যমান পৃষ্ঠাটি কভার না করে ব্যবহার করা কার্যকর হবে না, যা সর্বদা ক্ষেত্রে হয় না। পৃষ্ঠাটিতে কোথাও কার্সারটি লুকিয়ে রয়েছে তা নিশ্চিত করতে, ব্যবহার করুন:
document.documentElement.style.cursor = 'none';এটি পুনরায় চালু করতে:
document.documentElement.style.cursor = 'auto';স্ট্যাটিক সিএসএস স্বরলিপি সহ অ্যানালগটি পাভেল সালাকুর্দার উত্তরে ( সংক্ষেপেhtml * {cursor:none} :)