كيفية تسليط الضوء على النص التلقائي عند النقر فوق المستخدم

من المفترض أن يتم نسخ بعض أجزاء المحتوى على مواقع الويب من قبل المستخدمين ، مثل عنوان URL أو مفتاح API الذي تم إنشاؤه تلقائيًا أو بضعة أسطر من التعليمات البرمجية (المقتطفات). لكن نسخ هذه المحتويات قد يكون تحديًا ، خاصة للمستخدمين الذين يستخدمون لوحة التتبع أو ماوس crappy. لذلك دعونا نجعلها أسهل.

إذا تعثرت على مواقع الويب مثل TheNextWeb ، فستجد أن عنوان URL للوصلة القصيرة يتم تمييزه عند النقر فوقه. دعونا تحقق من كيفية القيام بذلك.

ابدء

بادئ ذي بدء ، نضع HTML الذي يلتف عنوان URL الارتباط القصير.

 
 رابط قصير 
  http://goo.gl/9JEpOz 
 
 

لدينا عنوان URL ملفوف في امتداد عنصر جنبا إلى جنب مع أيقونة من Ionicon. إن أسلوب هذه العناصر متروك لك تمامًا ، حيث سيعتمد على تصميم موقع الويب الخاص بك. ولكن لغرض هذا العرض التوضيحي ، أنا أصفه بهذه الطريقة:

إنها بسيطة ، زرقاء ومربعة (احصل على رموز النمط هنا).

جافا سكريبت

وهنا هو اللحم من التعليمات البرمجية ، وجافا سكريبت. الخطة هنا هي تمييز عنوان URL عند قيام المستخدمين بالنقر فوقه.

نبدأ الرمز مع متغير يحدد العنصر الذي سينقر عليه المستخدم.

 var target = document.querySelector ('. shortlink')؛ 

ال querySelector هي طريقة جافا سكريبت لتحديد العنصر ؛ أنها تعمل أساسا مثل منشئ jQuery $ (). يمكنك استخدام تدوين النقطة للحصول على العنصر حسب الفئة أو # تدوين للحصول على عنصر بمعرف.

بعد ذلك ، نحتاج إلى إنشاء وظيفة JavaScript جديدة.

 اختيار الوظيفة (elem)  

نحن نسمي وظيفتنا باسم اختيار(). وكما ترى أعلاه ، تتطلب الوظيفة معلمة لتمرير العنصر الذي يلتف عنوان URL أو أي نص عادي نود تسليط الضوء عليه. في حالتنا ، سيكون هذا هو امتداد عنصر مع shortlink__url صف دراسي.

ضمن هذه الوظيفة ، نضيف بضعة متغيرات أخرى:

 var target = document.querySelector ('. shortlink')؛ اختيار الوظيفة (elem) var elem = document.querySelector (elem)؛ var select = window.getSelection ()؛ var range = document.createRange ()؛  

لأول مرة إيليم متغير يحدد العنصر الذي نمر به من خلال المعلمة وظيفة. المتغير الثاني, تحديد, تدير وظيفة جافا سكريبت أصلية للحصول على اختيار النص. المتغير الأخير, نطاق يتحكم في مجموعة الاختيار ؛ نود التأكد من أن الاختيار يقع فقط داخل العنصر المحدد.

بعد ذلك ، نقوم بتسلسل هذه المتغيرات مع اثنين من وظائف JavaScript الأخرى كما يلي:

 var target = document.querySelector ('. shortlink')؛ اختيار الوظيفة (elem) var elem = document.querySelector (elem)؛ var select = window.getSelection ()؛ var range = document.createRange ()؛ range.selectNodeContents (إيليم)؛ select.addRange (المدى)؛  

الإضافة الأولى, range.selectNodeContents (إيليم), يحدد مجموعة من الاختيار وهو في هذه الحالة هو العنصر الذي تتم الإشارة إليه في إيليم. السطر الأخير, select.addRange (المدى) يجعل التحديد مقصورًا على النطاق المحدد.

عظيم! نحن جميعا مع مجموعة وظيفة. لنضعها موضع التنفيذ.

شغلها

نحن ربط العنصر الهدف مع عند النقر هدف. عند النقر فوق العنصر ، نقوم بتشغيل الوظيفة التي أنشأناها للتو وتمرير المعلمة مع اسم فئة العنصر حيث يتم لف عنوان URL ؛ في هذه الحالة هو عليه .shortlink__url.

 target.onclick = function () select ('. shortlink__url')؛ ؛ 

لقد إنتهينا. كما ذكرنا سابقًا ، يمكنك أيضًا القيام بذلك لأنواع أخرى من المحتوى على موقع الويب الخاص بك والتي قد ترغب في أن يقوم المستخدمون بنسخها بسهولة أكبر.

قد يتساءل البعض منكم عما إذا كنا نستطيع ذلك تلقائيًا نسخ, بدلا من تسليط الضوء فقط ، shorturl عند النقر فوق المستخدم. في حين أن هذا قد يبدو فكرة جيدة حقًا ، إلا أنه للأسف ليس من السهل تحقيقه وقد يتسبب في تجربة سيئة للمستخدم. يجب أن يكون إجراء النسخ بالكامل بموجب موافقة المستخدم.

الخطوات الموجودة في هذا المنشور لا تصل إلا إلى إجراء التمييز. سواءً كان المستخدمون سينسخونها أم لا ، فإن الأمر متروك لهم تمامًا.

يمكنك متابعة الروابط التالية لمشاهدة العرض التوضيحي أو تنزيل الكود المصدري.

• عرض تجريبي
• تحميل المصدر