این آموزش یک راهنمای کوتاه برای ایجاد یک ابزار کلیک برای کپی با استفاده از جاوا اسکریپت ساده، HTML و CSS است.
ابزار کلیک برای کپی در طول سال ها به یک الگوی محبوب در دنیای برنامه نویسی تبدیل شده است. من اغلب دیده ام که توسط توسعه دهندگان برای کپی سریع کلیدهای API، قطعه کد، اعداد و موارد دیگر استفاده می شود.
شروع این الگو در فضای فنی تر، بسیاری از وب سایت های مدرن را برانگیخته است تا طراحی مشابهی را در محصولات خود پیاده کنند تا تجربه کلی کاربران خود را افزایش دهند.
آنچه ما در حال ساختن
ابزار کلیک برای کپی می تواند اشکال مختلفی داشته باشد، اما ما از یک فیلد متنی و دکمه ساده برای این آموزش استفاده خواهیم کرد. پس از وارد کردن، مقدار فیلد متنی را می توان با کلیک کردن بر روی کلیپ بورد کپی کرد برای کپی کلیک کنید دکمه.
1. با نشانه گذاری HTML شروع کنید
اجزای HTML یک ابزار کلیک برای کپی به نوعی عنصر ورودی کاربر نیاز دارند. به ترتیب کلمات، یک ورودی متن یا ناحیه متنی که کاربر می تواند متن را در آن وارد کند.
همانطور که اشاره کردم، می‌توانید به‌صورت اختیاری یک عنصر با متن از پیش تعیین‌شده، مانند تکه‌های کد، داشته باشید.
این آموزش بر روی سمت ورودی کاربر آن سکه تمرکز دارد.
1 |
<h1 class="heading">Click-to-copy JavaScript Component</h1> |
2 |
<div class="copy-box"> |
3 |
<input type="text" placeholder="Change me" /> |
4 |
<button>Click-to-Copy</button> |
5 |
</div>
|
ما با HTML ساده شروع می کنیم که از یک ورودی متن و یک دکمه تشکیل شده است. یک div با یک .copy-box نام کلاس کنترل ها را می پوشاند تا بتوانیم آن و محتویات آن را با CSS هدف قرار دهیم.
2. سبک دادن به ابزار با CSS
ما می توانیم این ابزار را با چند CSS ساده به یک رابط کاربری کاربردی تر و زیباتر تبدیل کنیم.
متوجه الف خواهید شد .alert کلاس در CSS این عنصر برای کامپوننتی است که به صورت پویا با جاوا اسکریپت اضافه خواهیم کرد.
وقتی کاربر متنی را در ورودی وارد می کند و روی آن کلیک می کند برای کپی کلیک کنید را فشار دهید، هشدار در انتهای پایین درگاه نمای مرورگر نمایش داده می شود و به وسط صفحه منتقل می شود. ما استفاده می کنیم calc() ویژگی CSS برای استفاده از ریاضیات برای کمک به تعیین افست مناسب.
1 |
.heading { |
2 |
font-size: 14px; |
3 |
text-align: center; |
4 |
padding-top: 1rem; |
5 |
padding-bottom: 1rem; |
6 |
border-bottom: 1px solid #ddd; |
7 |
line-height: 1.5; |
8 |
background: #f8fafc; |
9 |
margin: 0; |
10 |
}
|
11 |
|
12 |
.copy-box { |
13 |
background: #f9fafb; |
14 |
padding: 10px; |
15 |
border-radius: 6px; |
16 |
border: 1px solid #cbd5e1; |
17 |
width: 400px; |
18 |
margin: 60px auto; |
19 |
display: flex; |
20 |
justify-content: space-between; |
21 |
gap: 1rem; |
22 |
position: relative; |
23 |
}
|
24 |
|
25 |
.copy-box input { |
26 |
color: #475569; |
27 |
border: 1px solid #e5e7eb; |
28 |
border-radius: 6px; |
29 |
padding: 10px 12px; |
30 |
font-size: 16px; |
31 |
flex-grow: inherit; |
32 |
flex: 1; |
33 |
}
|
34 |
|
35 |
.copy-box button { |
36 |
border-radius: 6px; |
37 |
appearance: none; |
38 |
background-color: #1d4ed8; |
39 |
color: white; |
40 |
border: none; |
41 |
padding: 10px 12px; |
42 |
cursor: pointer; |
43 |
}
|
44 |
|
45 |
.alert { |
46 |
position: fixed; |
47 |
bottom: 10px; |
48 |
right: calc(50% - (66px / 2)); /* width of half of alert element */ |
49 |
background: black; |
50 |
color: white; |
51 |
padding: 4px 9px; |
52 |
border-radius: 6px; |
53 |
z-index: 10; |
54 |
font-size: 14px; |
55 |
}
|
3. فراخوانی عملکرد کلیک برای کپی با جاوا اسکریپت
باشه، شماره سه از تثلیث مقدس ما.
الگوی سازنده
برای تنظیم کد برای استفاده مجدد، من از نوشتن کلاس های جاوا اسکریپت که از یک الگوی سازنده استفاده می کنند، استفاده می کنم. بنابراین می‌توانیم هر بار که به آن نیاز داریم یک نمونه جدید ایجاد کنیم و از همان عملکرد در ابزارهای مختلف کلیک برای کپی استفاده کنیم که ممکن است در یک وب‌سایت یا صفحه وب خاص مورد نیاز باشد.
این آموزش فرض می‌کند که شما یکی را در صفحه دارید، اما در صورت نیاز به مقیاس‌سازی، می‌تواند به چندین ابزار کمکی اضافه شود.
من با ایجاد یک کلاس جاوا اسکریپت سفارشی به نام شروع می کنم ClickToCopy.
با دانستن اینکه عنصر دکمه و عنصر ورودی را برای هدف گذاری داریم، یک تابع سازنده ایجاد می کنم که به ما دسترسی فوری به هر یک از مواردی که ممکن است در طول مقداردهی اولیه منتقل شوند را می دهد.
سپس می‌توانیم یک نمونه جدید به دنبال کلاس برای این آموزش راه‌اندازی کنیم.
1 |
class ClickToCopy { |
2 |
constructor(target, content) { |
3 |
this.target = target |
4 |
this.content = content |
5 |
}
|
6 |
}
|
7 |
|
8 |
const target = document.querySelector("button") |
9 |
const content = document.querySelector("input") |
10 |
const copyHelper = new ClickToCopy(target, content) |
11 |
copyHelper.initialize() |
ما باید دو نمونه ای که به آن ارجاع می دهیم را در داخل آن پاس کنیم constructor() تابع برای استفاده از کلاس.
با استفاده از new کلمه کلیدی، ما یک نمونه جدید از را ایجاد می کنیم ClickToCopy و آن را به متغیری که ساخته ام به نام آن اختصاص دهید copyHelper.
در نهایت، می توانیم تابعی را که من نام بردم فراخوانی کنیم initialize() که در ادامه به بدنه کلاس اضافه خواهیم کرد.
1 |
class ClickToCopy { |
2 |
constructor(target, content) { |
3 |
this.target = target |
4 |
this.content = content |
5 |
}
|
6 |
|
7 |
initialize() { |
8 |
this.listenForClick() |
9 |
}
|
10 |
|
11 |
listenForClick() { |
12 |
let self = this |
13 |
this.target.addEventListener("click", (e) => { |
14 |
e.preventDefault() |
15 |
self.copy(self.content.value) |
16 |
})
|
17 |
}
|
18 |
|
19 |
copy(text) { |
20 |
const input = document.createElement("input") |
21 |
input.setAttribute("value", text) |
22 |
document.body.appendChild(input) |
23 |
input.select() |
24 |
let copiedResult = document.execCommand("copy") |
25 |
document.body.removeChild(input) |
26 |
|
27 |
const alert = document.createElement("div") |
28 |
alert.classList.add("alert") |
29 |
alert.textContent = "Copied!" |
30 |
// Customize where you might want to display the alert here
|
31 |
// I chose the broader body element for demonstration purposes
|
32 |
document.body.appendChild(alert) |
33 |
|
34 |
setTimeout(() => { |
35 |
document.querySelector(".alert").style.display = "none" |
36 |
document.body.removeChild(alert) |
37 |
}, 1000) |
38 |
|
39 |
// Optionally reset input contents
|
40 |
this.content.value = "" |
41 |
|
42 |
// Return the result that gets copied to the clipboard
|
43 |
return copiedResult |
44 |
}
|
45 |
}
|
3 عملکرد ClickToCopy ما
درون ClickToCopy کلاس، من در کل سه تابع اضافه کرده ام.
-
initialize()– تابعی که دوست دارم از آن برای فراخوانی بخش عمده ای از منطق یک کلاس استفاده کنم. -
listenForClick()– یک تابع مسئول گوش دادن به کلیک دکمه در ابزار ما و همچنین فراخوانی یک تابع به نامcopy(). -
copy()– تابعی که منطق واقعی ابزار را انجام می دهد.
را copy() تابع یک ورودی متن جدید از ابتدا ایجاد می کند زیرا ما باید انتخاب متن و کپی متن را به صورت پویا تقلید کنیم. معمولاً این یک تمرین دستی است، اما خوشبختانه با جاوا اسکریپت، می‌توانید با کمی کار آن را خودکار کنید.
ورودی با محتوای ارائه شده در ورودی متن پر می شود. سپس متن با استفاده از جاوا اسکریپت انتخاب می شود select() روش. در نهایت، آن متن به صورت پویا در کلیپ بورد کاربر کپی می شود و ورودی متن جدیدی که ایجاد می شود از صفحه حذف می شود.
وقتی این منطق کامل شد، یک عنصر هشدار جدید به نمای اضافه می‌کنیم تا به کاربر کمک کند بفهمد متن واقعاً در کلیپ‌بورد او کپی شده است. این پس از حدود یک ثانیه با استفاده از آن حذف می شود setTimeout() تابع تعبیه شده در جاوا اسکریپت
اگر طراحی شما به آن نیاز دارد، می‌توانید به صورت اختیاری محتویات ورودی را بازنشانی کنید، و من این کار را برای این آموزش انتخاب کردم.
نتیجه
امیدواریم، این افزودنی ساده و در عین حال قدرتمند، کاربران نهایی شما را با کاهش تعداد کلیک‌های ماوس یا دستورات کلیدی که برای بهره‌وری بیشتر در وب‌سایت شما نیاز دارند، خوشحال کند.
بیایید به خود یادآوری کنیم که چه چیزی ساخته ایم:
