از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش کپی کردن در کلیپ بورد در جاوا اسکریپت با Clipboard API ویژگی کپی/پیست بدون شک یکی از رایج ترین ویژگی های مورد استفاده در محاسبات مدرن است و به process کپی/انتقال متن یا تصاویر از بخشی از یک برنامه کامپیوتری به قسمت دیگر. اخیراً، کپی کردن برخی از مطالب به صورت برنامه‌ریزی شده به یک روش معمول تبدیل شده است…
سرفصلهای مطلب
معرفی
ویژگی کپی/پیست بدون شک یکی از متداول ترین ویژگی های مورد استفاده در محاسبات مدرن است و به process کپی/انتقال متن یا تصاویر از بخشی از یک برنامه کامپیوتری به قسمت دیگر. اخیراً، کپی کردن برخی از محتویات به صورت برنامه‌ریزی شده در کلیپ‌بورد یک کاربر، به‌طوری که نیازی به این کار نداشته باشد، رایج شده است.
به عنوان مثال، کدهای فعال سازی و تأیید که ظاهر می شوند روی آ page یا ایمیل می‌توانید آنها را به‌طور خودکار کپی کنید یا دکمه‌ای داشته باشید که به کسی اجازه می‌دهد محتویات را در کلیپ‌بورد کپی کند، بنابراین نیازی نیست که خودش آن را کپی کند. علاوه بر این، قطعه کد نمونه خوبی از محتوایی است که ممکن است بخواهید در کلیپ بورد کپی شود!
در این راهنما، نگاهی به روش کپی کردن محتوا به صورت برنامه‌نویسی در کلیپ بورد با استفاده از Clipboard API جدید جاوا اسکریپت خواهیم داشت.
توجه داشته باشید: مگر اینکه شما باشید روی localhost، جدید Clipboard API فقط در صورتی کار می کند که وب سایت شما روی یک دامنه امن میزبانی شود (HTTPS).
در جاوا اسکریپت در کلیپ بورد کپی کنید
تمام process را می توان به یک دکمه (یا عنصر دیگر) که باعث ایجاد کد می شود، ساده کرد! شما همچنین می توانید این کار را انجام دهید روی را page بار، اما به طور کلی توصیه می شود در رابطه با رابط خودکار با کاربر و انجام اقداماتی که بر دستگاه محلی آنها تأثیر می گذارد محافظه کار باشید (مانند افزودن چیزی به کلیپ بورد):
<textarea id="content"></textarea>
<button onclick="copyToClipboard()">Copy</button>
<script>
function copyToClipboard() {
var copyText = document.getElementById("content").value;
navigator.clipboard.writeText(copyText).then(() => {
// Alert the user that the action took place.
// Nobody likes hidden stuff being done under the hood!
alert("Copied to clipboard");
});
}
</script>
با این حال، در اینجا چیزهای بیشتری برای گفتن وجود دارد – روش کار، محدودیت ها، روش کپی کردن تصاویر و غیره. در ادامه راهنما، دقیقاً به این موارد خواهیم پرداخت.
پیش از این، توسعه دهندگان جاوا اسکریپت متکی بودند روی document.execCommand(). با این حال، نسبتا جدید Clipboard API اخیرا برای انتقال داده ها از طریق کپی/پیست بدون درز منتشر شد!
خواندن مجوز مرورگر
بسته به روی عملی که در حال انجام (خواندن یا نوشتن) با Clipboard API هستید، همیشه توصیه می‌شود قبل از انجام هر عملیاتی مجوز مرورگر را بررسی کنید. برای بررسی اینکه آیا دارید نوشتن دسترسی داشته باشید، از آن استفاده خواهید کرد navigator.permissions و پرس و جو برای clipboard-write اجازه:
navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
if (result.state == "granted" || result.state == "prompt") {
alert("Write access ranted!");
}
});
توجه داشته باشید: مجوز “clipboard-write” Permissions API زمانی که صفحات در برگه فعال هستند به طور خودکار به آنها اعطا می شود.
به همین ترتیب، می توانید بررسی کنید که آیا دارید یا خیر clipboard-read دسترسی نیز:
navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
if (result.state == "granted" || result.state == "prompt") {
alert("Read access ranted!");
}
});
کپی کردن متن در کلیپ بورد
بیایید با کپی کردن متن در کلیپ بورد شروع کنیم. ما به طور خلاصه این را در مثال اول دیده‌ایم، و واقعاً پیچیده‌تر از آن نیست. برای کپی متن با جدید Clipboard API، ما از یک ناهمزمان استفاده می کنیم writeText() روش و این روش فقط یک پارامتر را می پذیرد – متنی که باید در کلیپ بورد کپی شود.
از آنجایی که ناهمزمان است، یک وعده را برمی گرداند، که اگر کلیپ بورد با موفقیت به روز شود، حل می شود، و در غیر این صورت رد می شود:
navigator.clipboard.writeText("TEXT_TO_COPY_TO").then(() => {
/* Resolved - text copied to clipboard */
},() => {
/* Rejected - clipboard failed */
});
مطالب کلیپ بورد را بخوانید
مشابه نوشتن، شما نیز می توانید خواندن محتویات یک کلیپ بورد این امر باعث ایجاد نگرانی در مورد حفظ حریم خصوصی می شود و شما باید در مورد استفاده از این ویژگی شفاف و محتاط باشید. ممکن است بخواهید نوشتن و خواندن را با هم زنجیره بزنید تا اطمینان حاصل کنید که آنچه می خوانید فقط همان چیزی است که قبلاً نوشته اید.
به عنوان مثال – یک کاربر ممکن است یک کد تأیید باز کند روی یکی page، که به طور خودکار در کلیپ بورد کپی می شود. اگر مطمئن باشید که آنها به سراغ دیگری خواهند رفت page با آن ورودی در کلیپ بورد – می توانید ورودی را بخوانید و آن را در فیلد دیگری بچسبانید تا دوباره کمی در وقت و تلاش آنها صرفه جویی کنید!
ما استفاده می کنیم readText() روش خواندن آخرین ورودی در کلیپ بورد. این روش همچنین یک وعده را برمی‌گرداند که اگر مرورگر بتواند به محتوای کلیپ‌بورد دسترسی داشته باشد حل می‌شود و در غیر این صورت رد می‌شود:
navigator.clipboard
.readText()
.then((copiedText) => {
// Do something with copied text
});
بر خلاف نوشتن در کلیپ بورد، درخواست برای خواندن محتوای کلیپ بورد مرورگر علاوه بر این، درخواستی یکباره را نشان می دهد که از کاربر می خواهد رضایت دهد، همانطور که در تصویر زیر نشان داده شده است:
تصویر و متن غنی را در کلیپ بورد کپی کنید
متن غنی به محتویات متنی اشاره دارد که امکان استایل سازی را فراهم می کند مانند – پررنگ، مورب، و خط کشیو همچنین خانواده فونت ها و اندازه های مختلف فونت. هنگام کپی محتوای متنی، ممکن است در داخل باشد متن غنی قالب، به این معنی که فراداده های بیشتری در مورد محتوا وجود دارد تا فقط خود متن.
همچنین می توانیم از Clipboard API استفاده کنیم write() روشی برای کپی کردن داده های دلخواه مانند متن و تصاویر غنی است و این تابع تنها یک پارامتر را می پذیرد که آرایه ای حاوی داده هایی است که باید در کلیپ بورد نوشته شوند. را writeText() روش برای متن ساده تخصصی است، در حالی که write() می تواند هر داده دلخواه بنویسد.
به عنوان مثال، می توانید یک تصویر را از یک URL راه دور دریافت کنید و آن را در کلیپ بورد کپی کنید:
const copyImage = async () => {
const response = await fetch("/path/to/image.png");
const blob = await response.blob();
await navigator.clipboard.write((
new ClipboardItem({ "image/png": blob }),
));
};
مثال بالا همچنین برای کپی متون غنی، زمانی که نوع مورد را به آن تغییر می دهید، کار می کند "text/html":
const copyRichText = async () => {
const content = document.getElementById("richTextInputId").innerHTML;
const blob = new Blob((content), { type: "text/html" });
const richTextInput = new ClipboardItem({ "text/html": blob });
await navigator.clipboard.write((richTextInput));
};
این فرض می کند که richTextInputId عنصر خود متن غنی را پشتیبانی می کند.
تصویر و متن غنی را از کلیپ بورد بخوانید
Clipboard API نیز یک ویژگی متمایز ارائه می دهد read() روشی که برای خواندن داده های دلخواه به جای متن ساده استفاده می شود و مشابه روش قبلی عمل می کند readText() عملکرد، اما می تواند داده های دلخواه را بخواند. به عنوان مثال برای خواندن داده های تصویری که قبلاً در کلیپ بورد کپی شده است:
<img src="" alt="" id="sample-img" />
<script>
const img = document.getElementById("sample-img");
navigator.clipboard.read().then((data) => {
for (let i = 0; i < data.length; i++) {
if (!data(i).types.includes("image/png")) {
// Clipboard does not contain image data
} else {
data(i).getType("image/png").then((blob) => {
img.src = URL.createObjectURL(blob);
});
}
}
});
</script>
نتیجه
در این راهنمای کوتاه، ما توانسته ایم این موارد را پوشش دهیم process کپی کردن متن و سایر داده ها مانند تصاویر در کلیپ بورد با استفاده از Clipboard API جدید. هر زمان که در حال نوشتن یا خواندن از روی ماشین محلی کاربر هستید – مراقب باشید که در مورد آن شفاف و ایمن باشید. process!
منتشر شده در 1403-01-13 11:51:04
