איך לאפשר לגולשים להעתיק טקסט ללוח העתקות בקלות

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

העתקת טקסט פשוטה

יש להוסיף לעמוד כפתור, ולתת לכפתור את הקלאס copy-btn

לאחר מכן נוסיף את הקוד הבא, בתוך הקוד, יש להחליף את ה- hello בטקסט שלכם.

זהו קוד JavaScript זה אומר שמכניסים את הקוד בתוך ווידג’ט מסוג HTML.
(יש למקם את הווידג’ט HTML לאחר הכפתור).

				
					<script>
document.querySelector(".copy-btn").addEventListener("click", function(){
const copyText = "hello";
navigator.clipboard.writeText(copyText);
});
</script>
				
			
וככה זה נראה

העתקת טקסט עם הודעה

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

				
					<script>
document.querySelector(".copy-btn").addEventListener("click", function(){
const copyText = "hello";
navigator.clipboard.writeText(copyText);
alert("copied the text: " + copyText);
});
</script>
				
			
וככה זה נראה

העתקת הטקסט מטקסט שמוצג באתר

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

נוסיף לעמוד ווידג’ט כותרת (אפשר גם עם עורך טקסט), שם נכתוב את הטקסט, וניתן לו את הקלאס copy-text

כמו כן נוסיף את הכפתור כנ”ל.

				
					<script>
document.querySelector(".copy-btn").addEventListener("click", function(){
const copyText = document.querySelector(".copy-text").innerText;
navigator.clipboard.writeText(copyText);
});
</script>
				
			
וככה זה נראה
כאן יש טקסט להעתקה

העתקת הקישור של העמוד הנוכחי

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

				
					<script>
document.querySelector(".copy-btn").addEventListener("click", function(){
const copyText = location.href;
navigator.clipboard.writeText(copyText);
alert("הקישור הועתק ללוח");
});
</script>
				
			
וככה זה נראה

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?