ناپسندیدہ متن کے انتخاب کو روکنا
ان اینکرز کے لیے جو بٹنوں کی طرح کام کرتے ہیں، جیسے کہ اسٹیک اوور فلو سائڈبار (سوالات، ٹیگز، اور صارفین) پر، یہ مایوس کن ہو سکتا ہے جب صارفین غلطی سے متن کو نمایاں کرتے ہیں۔ یہ اکثر اس وقت ہوتا ہے جب یہ عناصر نیویگیشن یا اعمال کے لیے استعمال کیے جاتے ہیں، جہاں متن کا انتخاب غیر ارادی ہوتا ہے۔
اگرچہ JavaScript متن کے انتخاب کو روکنے کے لیے حل پیش کرتا ہے، لیکن یہ جاننا فائدہ مند ہے کہ آیا CSS معیاری مطابق طریقہ فراہم کرتا ہے۔ یہ مضمون سی ایس ایس کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن ہائی لائٹنگ کو غیر فعال کرنے کا طریقہ دریافت کرتا ہے اور اس اثر کو حاصل کرنے کے بہترین طریقوں پر بحث کرتا ہے۔
| کمانڈ | تفصیل |
|---|---|
| -webkit-user-select | سفاری براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| -moz-user-select | فائر فاکس براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| -ms-user-select | انٹرنیٹ ایکسپلورر 10+ میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| user-select | جدید براؤزرز میں متن کے انتخاب کو غیر فعال کرنے کے لیے معیاری CSS خاصیت۔ |
| onselectstart | کسی عنصر پر متن کے انتخاب کو روکنے کے لیے JavaScript ایونٹ ہینڈلر۔ |
| querySelectorAll | JavaScript کا طریقہ ان تمام عناصر کو منتخب کرنے کے لیے جو سلیکٹرز کے مخصوص گروپ سے مماثل ہیں۔ |
متن کے انتخاب کو غیر فعال کرنے کے لیے اسکرپٹ کو سمجھنا
سی ایس ایس کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن ہائی لائٹنگ کو غیر فعال کرنے کے لیے، ہم لاگو کرتے ہیں۔ -webkit-user-select، -moz-user-select، -ms-user-select، اور user-select خواص یہ خصوصیات مختلف براؤزرز کو پورا کرتی ہیں، کراس براؤزر کی مطابقت کو یقینی بناتی ہیں۔ ان خصوصیات کو ترتیب دے کر none، متن کا انتخاب غیر فعال ہے، صارفین کو عناصر میں متن کو نمایاں کرنے سے روکتا ہے۔ no-select کلاس
JavaScript کی مثال میں، ہم دستاویز میں ایک ایونٹ سننے والے کو شامل کرتے ہیں جو DOM مواد کے مکمل لوڈ ہونے کے بعد عمل میں آتا ہے۔ دی querySelectorAll طریقہ کے ساتھ تمام عناصر کو منتخب کرتا ہے no-select کلاس ہر منتخب عنصر کے لیے، onselectstart ایونٹ کو واپس کرنے کے لیے اوور رائیڈ کر دیا گیا ہے۔ falseمتن کے انتخاب کو روکنا۔ CSS اور JavaScript کا یہ مجموعہ مختلف براؤزرز اور منظرناموں میں متن کے انتخاب کو غیر فعال کرنے کے لیے ایک مضبوط حل کو یقینی بناتا ہے۔
متن کے انتخاب کو غیر فعال کرنے کا سی ایس ایس طریقہ
متن کے انتخاب کو غیر فعال کرنے کے لیے CSS کا استعمال
/* CSS to disable text selection */.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}
متن کے انتخاب کو روکنے کے لیے جاوا اسکرپٹ اپروچ
متن کے انتخاب کو غیر فعال کرنے کے لیے جاوا اسکرپٹ حل
/* JavaScript to disable text selection */document.addEventListener('DOMContentLoaded', (event) => {document.querySelectorAll('.no-select').forEach((element) => {element.onselectstart = function() {return false;};});});
عملی درخواست کے لیے CSS اور HTML کا امتزاج
CSS اور HTML کے ساتھ عملی مثال
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}</style></head><body><div class="no-select">Non-selectable text</div></body></html>
مزید حل تلاش کرنا
ویب ایپلیکیشنز میں ٹیکسٹ سلیکشن کو روکنے کا ایک اور طریقہ استعمال کر رہا ہے۔ draggable HTML میں وصف۔ یہ وصف، جب پر سیٹ کیا جاتا ہے۔ falseاس بات کو یقینی بناتا ہے کہ عنصر کو منتخب یا گھسیٹا نہیں جا سکتا، صارف کے تعاملات پر کنٹرول کی ایک اور پرت فراہم کرتا ہے۔ یہ خاص طور پر بٹن اور ٹیبز جیسے انٹرایکٹو عناصر کے لیے مفید ہو سکتا ہے جنہیں ہائی لائٹ یا حادثاتی طور پر منتقل نہیں کیا جانا چاہیے۔
مزید برآں، pointer-events سی ایس ایس پراپرٹی کو استعمال کیا جا سکتا ہے۔ ترتیب سے pointer-events: none، آپ کسی عنصر میں متن کو غیر منتخب کر سکتے ہیں۔ تاہم، یہ طریقہ دیگر تعاملات کو بھی غیر فعال کر دیتا ہے جیسے کلک کرنا، جو ہو سکتا ہے کہ استعمال کے تمام معاملات کے لیے مطلوبہ نہ ہو۔ صحیح طریقہ کا انتخاب کرتے وقت استعمال اور فعالیت میں توازن رکھنا کلیدی حیثیت رکھتا ہے۔
عام سوالات اور حل
- میں CSS کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن کو کیسے روک سکتا ہوں؟
- کا استعمال کرتے ہیں user-select پراپرٹی کو مقرر کیا گیا ہے۔ none مطلوبہ عناصر کے لیے۔
- کیا ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے جاوا اسکرپٹ کا کوئی طریقہ ہے؟
- جی ہاں، ترتیب دے کر onselectstart واپسی کا واقعہ false ہدف بنائے گئے عناصر پر۔
- کیا ہے -webkit-user-select جائیداد؟
- یہ ایک سی ایس ایس پراپرٹی ہے جو سفاری اور کروم براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے استعمال ہوتی ہے۔
- کیا میں استعمال کر سکتا ہوں pointer-events متن کے انتخاب کو روکنے کے لئے؟
- جی ہاں، ترتیب pointer-events کو none متن کے انتخاب کو روک سکتا ہے لیکن دوسرے تعاملات کو بھی غیر فعال کرتا ہے۔
- کیا کرتا ہے draggable وصف کرتے ہیں؟
- دی draggable انتساب، جب پر سیٹ کریں۔ false، عناصر کو منتخب یا گھسیٹنے سے روکتا ہے۔
- کیا سی ایس ایس کے ساتھ تمام براؤزرز کو نشانہ بنانے کا کوئی طریقہ ہے؟
- کا استعمال کرتے ہیں -webkit-user-select، -moz-user-select، -ms-user-select، اور user-select ایک ساتھ خصوصیات.
- کیا متن کے انتخاب کو غیر فعال کرنے میں کوئی کمی ہے؟
- متن کے انتخاب کو غیر فعال کرنا انٹرایکٹو عناصر کے لیے صارف کے تجربے کو بہتر بنا سکتا ہے لیکن کچھ صارفین کے لیے رسائی میں رکاوٹ بن سکتا ہے۔
- کیا متن کا انتخاب صرف مخصوص عناصر کے لیے غیر فعال کیا جا سکتا ہے؟
- ہاں، آپ بٹن یا ٹیبز جیسے مخصوص عناصر پر پراپرٹیز یا ایونٹ ہینڈلرز کا اطلاق کر سکتے ہیں۔
- متن کے انتخاب کو غیر فعال کرنے کے بہترین طریقے کیا ہیں؟
- کراس براؤزر کی مطابقت کے لیے CSS اور JavaScript کے طریقوں کو یکجا کریں اور یقینی بنائیں کہ استعمال کے ساتھ سمجھوتہ نہیں کیا گیا ہے۔
متن کے انتخاب کو غیر فعال کرنے کے بارے میں حتمی خیالات
متن کے انتخاب کو نمایاں کرنے سے روکنا انٹرایکٹو ویب عناصر کے استعمال کو بڑھاتا ہے۔ سی ایس ایس خصوصیات کا استعمال کرنا جیسے user-select براؤزر کے ساتھ مخصوص سابقے تمام بڑے براؤزرز میں مطابقت کو یقینی بناتا ہے۔ مزید برآں، متن کے انتخاب کو منظم کرنے کے لیے JavaScript کو شامل کرنا ایک مضبوط حل فراہم کرتا ہے۔ صحیح طریقے سے لاگو ہونے پر، یہ تکنیکیں ایسے عناصر میں حادثاتی متن کے انتخاب کو روک کر صارف کے تجربے کو بہتر بناتی ہیں جو بٹن یا ٹیبز کے طور پر کام کرتے ہیں، اور ناپسندیدہ روشنی ڈالے بغیر ہموار تعامل کو یقینی بناتے ہیں۔