آموزش‌ها

»

قابلیت های css و javascript برای کار با متن انتخاب (Select) شده

شکل‌دهی به متن انتخاب شده توسط موس به سادگی در CSS میسر است:

::selection{background:#500;color:#0f0;}
::-moz-selection{background:#500;color:#0f0;}
::-webkit-selection{background:#500;color:#0f0;}

با این کار می‌توان برای متن انتخاب شده توسط موس، رنگ متن و رنگ ضمیمه را تعریف کرد. یک نمونه عملی از کد فوق را در صفحه جاری می‌توانید مشاهده کنید.
همچنین استایل بندی فوق را، تنها به یک یا چند المان خاص دلخواه محدود کرد. مثلا ممکن است بخواهید فقط متن انتخاب شده درون div#myId دارای رنگ‌بندی فوق باشد. در اینصورت کافیست بنویسیم:

div#myId::selection{background:#500;color:#0f0;}
div#myId::-moz-selection{background:#500;color:#0f0;}
div#myId::-webkit-selection{background:#500;color:#0f0;}

نکته: با استفاده از انتخابگر ::selection بجز color و background ، فقط cursor و outline و text-shadow را می‌توان تغییر داد و سایر استایل‌های متن انتخاب شده (فونت و ...) توسط css قابل تعریف نیست.

کار با متن انتخاب شده در جاوا اسکریپت

با کمک رویداد (event) های جاوا اسکریپت می‌توان تشخیص داد که کاربر بخشی از متن صفحه را با کمک موس انتخاب کرده است. نکته جالب اینجاست که می‌توان به متن انتخاب شده نیز دست پیدا کرد:

function getSelectedText(){
  if(window.getSelection)
    return window.getSelection().toString();
  if(document.selection)
    return document.selection.createRange().text;
  return;
}

و کارهای جالبی با آن انجام داد که در ادامه به چند نمونه کابرد، کد و پلاگین مرتبط با این قابلیت لیست شده:

• تشخیص متن کپی شده از سایت شما
  با کمک جی‌کوئری و خود جاوا اسکریپت، می‌توان کلیک راست یا فشرده شدن Ctrl+V را تشخیص داد و سپس متن انتخاب شده را با درخواست ای‌جکسی به سمت سرور ارسال کرد. بدین ترتیب مدیر می‌تواند آمار متون کپی شده از سایتش را داشته باشد که کاربردهای مختلفی می‌تواند داشته باشد.
• نمایش منو برای انجام عملیات‌های دلخواه روی متن انتخاب شده
  این کار کاربردهای زیادی دارد. مثلا TweetHighlighted یک اسکریپت کوچک یک کیلوبایتی است که پس از انتخاب بخشی از متن صفحه و رها شدن دکمه موس، یک button در کنار موس ظاهر می‌کند که امکان ارسال آن مطلب به توییتر را فراهم می‌کند که البته بجای ارسال به توییتر، می‌توان کارها بسیار متنوع و جالب دیگری کرد که textAssist را می‌توانید برای نمونه ببینید.
• افزودن متن کپی رایت! و آدرس صفحه فعلی به متن کپی شده
  سایت tynt یک اسکریپت و سرویس اختصاصی برای این موضوع تهیه کرده است که توسط دیگر سایت‌ها (حتی برخی سایت‌های بسیار مشهور) نیز مورد استفاده قرار گرفته است.
  اگر هم دنبال یک نسخه شخصی از چنین اسکریپتی هستید، می‌توانید این نمونه کد را ببینید و آن را حسب نیاز خود تغییر دهید...
  با کمک این کدها به سادگی می‌توانید به متن کپی شونده، متن دلخواه خود را بیفزایید تا در صورت paste شدن متن، آن متن دلخواه نیز به همراه متن کپی شده توسط کاربر، paste شود...

(این مطلب در آینده تکمیل خواهد شد...)