כיצד אוטומטי הדגש טקסט על המשתמש לחץ

חלקים מסוימים של תוכן באתרים מיועדים להעתקה על ידי המשתמשים, כגון כתובת אתר, מפתח API שנוצר באופן אוטומטי או מספר שורות קוד (קטעי טקסט). אבל העתקת תוכן זה יכול להיות אתגר, במיוחד עבור משתמשים המשתמשים בלוח עכבר או עכבר crappy. אז בואו להקל עליהם.

אם יש לך stumbled אל אתרי אינטרנט כמו TheNextWeb, תמצא כי כתובת האתר shortlink מודגש בעת לחיצה על זה. בואו לבדוק איך זה נעשה.

מתחילים

ראשית, אנו פורשים את ה- HTML שעוטף את כתובת האתר של הקישור הקצר.

 
 קישור קצר 
  http://goo.gl/9JEpOz 
 
 

יש לנו את כתובת האתר עטופה ב span אלמנט יחד עם סמל מ Ionicon. הסגנון של אלמנטים אלה תלוי אך ורק בך, כפי שהוא יהיה תלוי פריסת האתר שלך. אבל, לצורך הדגמה זו, אני בסגנון זה כך:

זה פשוט, כחול מרובע (לתפוס את קודי סגנון כאן).

JavaScript

והנה בשר הקוד, ה- JavaScript. התוכנית כאן היא הדגש את כתובת האתר כאשר משתמשים לוחצים עליה.

אנחנו מתחילים את הקוד עם משתנה לבחור את האלמנט שבו המשתמש ילחץ.

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

ה שאילתה היא שיטת JavaScript כדי לבחור את האלמנט; זה בעצם עובד כמו בנאי jQuery $ (). ניתן להשתמש בסימון הנקודות כדי לקבל את האלמנט לפי הכיתה או # סימון כדי לקבל אלמנט על ידי תעודת הזהות.

הבא, אנחנו צריכים ליצור פונקציית JavaScript חדשה.

 בחירת פונקציה (elem)  

אנחנו קוראים לתפקיד שלנו בחירה (). וכפי שניתן לראות לעיל, הפונקציה דורשת פרמטר להעביר את האלמנט שעוטף את כתובת האתר או כל טקסט רגיל שאנחנו רוצים להדגיש. במקרה שלנו, זה יהיה span אל קצר מעמד.

בתוך פונקציה זו, אנו מוסיפים עוד כמה משתנים:

 var target = document.querySelector ('shortlink'); (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var var = document.createRange ();  

קודם ה עלם משתנה בוחרת את האלמנט שאנו עוברים דרך הפרמטר של הפונקציה. המשתנה השני, בחר, פועל פונקציית JavaScript מקומית כדי לקבל את הבחירה של טקסט. המשתנה האחרון, טווח שולט על טווח הבחירה; ברצוננו להבטיח שהבחירה תהיה רק ​​בתוך האלמנט שנבחר.

הבא, אנחנו שרשרת אלה משתנים עם כמה פונקציות אחרות JavaScript כדלקמן:

 var target = document.querySelector ('shortlink'); (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var var = document.createRange (); range.selectNodeContents (elem); select.addRange (טווח);  

התוספת הראשונה, range.selectNodeContents (elem), מגדיר את טווח הבחירה אשר במקרה זה הוא אלמנט כמו להיות מופנה ב עלם. השורה האחרונה, select.addRange (טווח) עושה את הבחירה מוגבלת לטווח שצוין.

גדול! כולנו נקבעים עם הפונקציה. בואו נניח את זה לפעולה.

תריץ את זה

אנחנו לאגד את אלמנט היעד עם בלחיצה אירוע. כאשר האלמנט נלחץ, אנו מפעילים את הפונקציה שעשינו זה עתה והעברנו את הפרמטר עם שם המחלקה של האלמנט שבו כתובת האתר עטופה; במקרה זה הוא .קצר.

 יעד.קליק = פונקציה () בחירה ('shortlink__url'); ; 

אנחנו גמרנו. כפי שצוין קודם, תוכל גם לעשות זאת עבור סוגים אחרים של תוכן באתר שלך, אשר ייתכן שתרצה שהמשתמשים שלך יוכלו להעתיק בקלות רבה יותר.

כמה מכם עשויים לתהות אם נוכל באופן אוטומטי עותק, במקום רק להדגיש, את shorturl על המשתמש לחץ. אמנם זה אולי נראה כמו רעיון טוב באמת, זה לצערי לא די קל להשיג עלול לגרום לחוויית משתמש רע. פעולת ההעתקה צריכה להיות מלאה בהסכמת המשתמש.

השלבים בפוסט הזה מתייחסים רק לפעולת ההדגשה. אם המשתמשים שלנו להעתיק אותו או לא תלוי אך ורק בהם.

תוכל לעקוב אחר הקישורים הבאים כדי לראות את ההדגמה או להוריד את קוד המקור.

• הצג הדגמה
• הורד מקור