```html
```
بررسی کلی وبسایت رسمی
Choices.js یک انتخابگر تاریخ و زمان سبک و قدرتمند است.
نحوه استفاده
فایل JS مربوط به نمودار زیر را در این مسیر پیدا کنید: resources/js/components/form-clipboard.js
کپی متن از عنصر دیگر #
مقداری که شما در این ویژگی قرار میدهید باید با انتخابگر عنصر دیگر مطابقت داشته باشد.
<div class="input-group">
<input id="clipboard_example" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
<button class="btn btn-primary btn-copy-clipboard" data-clipboard-target="#clipboard_example"> کپی </button>
</div>
// انتخاب عناصر
const target = document.getElementById('clipboard_example');
const button = target.nextElementSibling;
// تنظیم کپی -- برای اطلاعات بیشتر لطفاً به مستندات رسمی مراجعه کنید: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.value;
}
});
// مدیریت موفقیت عمل
clipboard.on('success', function (e) {
const currentLabel = button.innerHTML;
// خارج کردن بهروزرسانی برچسب در زمان جاری
if (button.innerHTML === 'کپی شد!') {
return;
}
// بهروزرسانی برچسب دکمه
button.innerHTML = 'کپی شد!';
// برگرداندن برچسب دکمه پس از 3 ثانیه
setTimeout(function () {
button.innerHTML = currentLabel;
}, 3000)
});
برش متن از عنصر دیگر #
علاوه بر این، میتوانید یک ویژگی data-clipboard-action تعریف کنید تا مشخص شود که آیا میخواهید محتوا را کپی یا برش دهید.
<textarea id="clipboard_cut" class="form-control mb-3" cols="62" rows="6">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،</textarea>
<button class="btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard_cut"> کپی </button>
// انتخاب عناصر
const target = document.getElementById('clipboard_cut');
const button = target.nextElementSibling;
// تنظیم کپی -- برای اطلاعات بیشتر لطفاً به مستندات رسمی مراجعه کنید: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.innerText;
}
});
// مدیریت موفقیت عمل
clipboard.on('success', function (e) {
const currentLabel = button.innerHTML;
// خارج کردن بهروزرسانی برچسب در زمان جاری
if (button.innerHTML === 'کپی شد!') {
return;
}
// بهروزرسانی برچسب دکمه
button.innerHTML = 'کپی شد!';
// برگرداندن برچسب دکمه پس از 3 ثانیه
setTimeout(function () {
button.innerHTML = currentLabel;
}, 3000)
});
کپی متن از ویژگی #
حقیقت این است که شما حتی به عنصر دیگری برای کپی کردن محتوای آن نیاز ندارید. شما فقط میتوانید یک ویژگی data-clipboard-text را در عنصر محرک خود قرار دهید.
<button id="clipboard_text" class="btn btn-primary" data-clipboard-text="تنها به این دلیل که میتوانید به این معنا نیست که باید — clipboard.js">
کپی به کلیپ بورد
</button>
// انتخاب عنصر
const target = document.getElementById('clipboard_text');
// تنظیم کپی -- برای اطلاعات بیشتر لطفاً به مستندات رسمی مراجعه کنید: https://clipboardjs.com/
var clipboard = new ClipboardJS(target);
// مدیریت موفقیت عمل
clipboard.on('success', function (e) {
const currentLabel = target.innerHTML;
// خارج کردن بهروزرسانی برچسب در زمان جاری
if (target.innerHTML === 'کپی شد!') {
return;
}
// بهروزرسانی برچسب دکمه
target.innerHTML = 'کپی شد!';
// برگرداندن برچسب دکمه پس از 3 ثانیه
setTimeout(function () {
target.innerHTML = currentLabel;
}, 3000)
});