ناپسندیدہ متن کے انتخاب کو روکنا
ان اینکرز کے لیے جو بٹنوں کی طرح کام کرتے ہیں، جیسے کہ اسٹیک اوور فلو سائڈبار (سوالات، ٹیگز، اور صارفین) پر، یہ مایوس کن ہو سکتا ہے جب صارفین غلطی سے متن کو نمایاں کرتے ہیں۔ یہ اکثر اس وقت ہوتا ہے جب یہ عناصر نیویگیشن یا اعمال کے لیے استعمال کیے جاتے ہیں، جہاں متن کا انتخاب غیر ارادی ہوتا ہے۔
اگرچہ JavaScript متن کے انتخاب کو روکنے کے لیے حل پیش کرتا ہے، لیکن یہ جاننا فائدہ مند ہے کہ آیا CSS معیاری مطابق طریقہ فراہم کرتا ہے۔ یہ مضمون سی ایس ایس کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن ہائی لائٹنگ کو غیر فعال کرنے کا طریقہ دریافت کرتا ہے اور اس اثر کو حاصل کرنے کے بہترین طریقوں پر بحث کرتا ہے۔
| کمانڈ | تفصیل |
|---|---|
| -webkit-user-select | سفاری براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| -moz-user-select | فائر فاکس براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| -ms-user-select | انٹرنیٹ ایکسپلورر 10+ میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے سی ایس ایس پراپرٹی۔ |
| user-select | جدید براؤزرز میں متن کے انتخاب کو غیر فعال کرنے کے لیے معیاری CSS خاصیت۔ |
| onselectstart | کسی عنصر پر متن کے انتخاب کو روکنے کے لیے JavaScript ایونٹ ہینڈلر۔ |
| querySelectorAll | JavaScript کا طریقہ ان تمام عناصر کو منتخب کرنے کے لیے جو سلیکٹرز کے مخصوص گروپ سے مماثل ہیں۔ |
متن کے انتخاب کو غیر فعال کرنے کے لیے اسکرپٹ کو سمجھنا
سی ایس ایس کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن ہائی لائٹنگ کو غیر فعال کرنے کے لیے، ہم لاگو کرتے ہیں۔ ، ، ، اور user-select خواص یہ خصوصیات مختلف براؤزرز کو پورا کرتی ہیں، کراس براؤزر کی مطابقت کو یقینی بناتی ہیں۔ ان خصوصیات کو ترتیب دے کر ، متن کا انتخاب غیر فعال ہے، صارفین کو عناصر میں متن کو نمایاں کرنے سے روکتا ہے۔ کلاس
JavaScript کی مثال میں، ہم دستاویز میں ایک ایونٹ سننے والے کو شامل کرتے ہیں جو DOM مواد کے مکمل لوڈ ہونے کے بعد عمل میں آتا ہے۔ دی طریقہ کے ساتھ تمام عناصر کو منتخب کرتا ہے کلاس ہر منتخب عنصر کے لیے، ایونٹ کو واپس کرنے کے لیے اوور رائیڈ کر دیا گیا ہے۔ 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>
مزید حل تلاش کرنا
ویب ایپلیکیشنز میں ٹیکسٹ سلیکشن کو روکنے کا ایک اور طریقہ استعمال کر رہا ہے۔ HTML میں وصف۔ یہ وصف، جب پر سیٹ کیا جاتا ہے۔ اس بات کو یقینی بناتا ہے کہ عنصر کو منتخب یا گھسیٹا نہیں جا سکتا، صارف کے تعاملات پر کنٹرول کی ایک اور پرت فراہم کرتا ہے۔ یہ خاص طور پر بٹن اور ٹیبز جیسے انٹرایکٹو عناصر کے لیے مفید ہو سکتا ہے جنہیں ہائی لائٹ یا حادثاتی طور پر منتقل نہیں کیا جانا چاہیے۔
مزید برآں، سی ایس ایس پراپرٹی کو استعمال کیا جا سکتا ہے۔ ترتیب سے ، آپ کسی عنصر میں متن کو غیر منتخب کر سکتے ہیں۔ تاہم، یہ طریقہ دیگر تعاملات کو بھی غیر فعال کر دیتا ہے جیسے کلک کرنا، جو ہو سکتا ہے کہ استعمال کے تمام معاملات کے لیے مطلوبہ نہ ہو۔ صحیح طریقہ کا انتخاب کرتے وقت استعمال اور فعالیت میں توازن رکھنا کلیدی حیثیت رکھتا ہے۔
- میں CSS کا استعمال کرتے ہوئے ٹیکسٹ سلیکشن کو کیسے روک سکتا ہوں؟
- کا استعمال کرتے ہیں پراپرٹی کو مقرر کیا گیا ہے۔ مطلوبہ عناصر کے لیے۔
- کیا ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے جاوا اسکرپٹ کا کوئی طریقہ ہے؟
- جی ہاں، ترتیب دے کر واپسی کا واقعہ ہدف بنائے گئے عناصر پر۔
- کیا ہے جائیداد؟
- یہ ایک سی ایس ایس پراپرٹی ہے جو سفاری اور کروم براؤزرز میں ٹیکسٹ سلیکشن کو غیر فعال کرنے کے لیے استعمال ہوتی ہے۔
- کیا میں استعمال کر سکتا ہوں متن کے انتخاب کو روکنے کے لئے؟
- جی ہاں، ترتیب کو متن کے انتخاب کو روک سکتا ہے لیکن دوسرے تعاملات کو بھی غیر فعال کرتا ہے۔
- کیا کرتا ہے وصف کرتے ہیں؟
- دی انتساب، جب پر سیٹ کریں۔ ، عناصر کو منتخب یا گھسیٹنے سے روکتا ہے۔
- کیا سی ایس ایس کے ساتھ تمام براؤزرز کو نشانہ بنانے کا کوئی طریقہ ہے؟
- کا استعمال کرتے ہیں ، ، ، اور user-select ایک ساتھ خصوصیات.
- کیا متن کے انتخاب کو غیر فعال کرنے میں کوئی کمی ہے؟
- متن کے انتخاب کو غیر فعال کرنا انٹرایکٹو عناصر کے لیے صارف کے تجربے کو بہتر بنا سکتا ہے لیکن کچھ صارفین کے لیے رسائی میں رکاوٹ بن سکتا ہے۔
- کیا متن کا انتخاب صرف مخصوص عناصر کے لیے غیر فعال کیا جا سکتا ہے؟
- ہاں، آپ بٹن یا ٹیبز جیسے مخصوص عناصر پر پراپرٹیز یا ایونٹ ہینڈلرز کا اطلاق کر سکتے ہیں۔
- متن کے انتخاب کو غیر فعال کرنے کے بہترین طریقے کیا ہیں؟
- کراس براؤزر کی مطابقت کے لیے CSS اور JavaScript کے طریقوں کو یکجا کریں اور یقینی بنائیں کہ استعمال کے ساتھ سمجھوتہ نہیں کیا گیا ہے۔
متن کے انتخاب کو نمایاں کرنے سے روکنا انٹرایکٹو ویب عناصر کے استعمال کو بڑھاتا ہے۔ سی ایس ایس خصوصیات کا استعمال کرنا جیسے براؤزر کے ساتھ مخصوص سابقے تمام بڑے براؤزرز میں مطابقت کو یقینی بناتا ہے۔ مزید برآں، متن کے انتخاب کو منظم کرنے کے لیے JavaScript کو شامل کرنا ایک مضبوط حل فراہم کرتا ہے۔ صحیح طریقے سے لاگو ہونے پر، یہ تکنیکیں ایسے عناصر میں حادثاتی متن کے انتخاب کو روک کر صارف کے تجربے کو بہتر بناتی ہیں جو بٹن یا ٹیبز کے طور پر کام کرتے ہیں، اور ناپسندیدہ روشنی ڈالے بغیر ہموار تعامل کو یقینی بناتے ہیں۔