Bootstrap sao chép vào clipboard

Tính năng sao chép vào khay nhớ tạm cho Bootstrap 5 mới nhất. Cho phép người dùng của bạn dễ dàng sao chép văn bản hoặc liên kết bằng một cú nhấp chuột

Cài đặt

Cài đặt thủ công (gói zip)

Để tận dụng thành phần hình ảnh Bootstrap của chúng tôi và sử dụng chúng trong dự án của bạn, trước tiên bạn cần cài đặt

MDB CLI

Xem Hướng dẫn bắt đầu nhanh của chúng tôi để khám phá và sử dụng toàn bộ tiềm năng của MDB 5 và MDB CLI

NPM

Trước khi bắt đầu dự án, hãy đảm bảo cài đặt Node LTS (12. x. x khuyến nghị)

Để cài đặt MDB UI KIT trong dự án của bạn, hãy dễ dàng gõ lệnh sau trong terminal

npm i mdb-ui-kit 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể nhập toàn bộ thư viện hoặc chỉ các mô-đun riêng lẻ

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để nhập biểu định kiểu MDB, vui lòng sử dụng cú pháp sau

@import '~mdb-ui-kit/css/mdb.min.css'; 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn cũng có thể nhập các mô-đun SCSS riêng lẻ. Để thực hiện đúng cách, chúng tôi khuyên bạn nên sao chép chúng từ vị trí node_modules/mdb-ui-kit/src/scss trực tiếp vào dự án của bạn và nhập theo cách tương tự như các tệp CSS

Bạn có thể tăng tốc đáng kể quá trình tạo một dự án mới dựa trên Webpack bằng Starter của chúng tôi

CDN

Cài đặt qua CDN là một trong những phương pháp dễ dàng nhất để tích hợp MDB UI KIT với dự án của bạn. Chỉ cần sao chép thẻ tập lệnh JS được biên dịch mới nhất và thẻ liên kết CSS từ cdnjs vào ứng dụng

Đừng quên thêm Font Awesome và Roboto font nếu bạn cần. Đây là một mã ví dụ

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

tùy chỉnh

Ví dụ cơ bản

Bằng cách thêm nút có tên lớp clipboard và thuộc tính data-mdb-target, bạn có thể dễ dàng sao chép văn bản của mình

Nút bấm Sao chép văn bản từ đầu vào chủ yếu được sử dụng trong các trang web. Vì vậy, ở đây chúng tôi đã tạo một giao diện người dùng đơn giản cho phần tử này bằng cách sử dụng Bootstrap 5 và các thành phần

cũng đọc. - Bảng giá đáp ứng Bulma

Trong phần tử này, chúng tôi đã sử dụng phương thức javascript execCommand để sao chép văn bản đầu vào bằng ID. Để xem xét giao diện người dùng nhóm, chúng tôi đã sử dụng các thành phần biểu mẫu nhóm đầu vào với ID đầu vào. Đây là một phương thức đáp ứng cho chế độ xem trên thiết bị di động và máy tính bảng

Biến nó thành của bạn ngay bây giờ bằng cách sử dụng, tải xuống và vui lòng chia sẻ nó. chúng tôi sẽ thiết kế thêm các yếu tố cho bạn

Tải xuống

Tải xuống SVG để sử dụng hoặc chỉnh sửa

phông chữ biểu tượng

Sử dụng phông chữ web?

điểm mã

• bảng chữ cái. U+F290
• CSS. \F290
• JS. \uF290
• HTML. 

Sao chép HTML

Dán SVG ngay vào mã dự án của bạn

Clipboard là một cách tiếp cận hiện đại để sao chép văn bản vào clipboard. Không có đèn flash. Không có khuôn khổ. Để có tài liệu đầy đủ, vui lòng kiểm tra trang web của plugin

Các tệp CSS và Javascript của Clipboard được đóng gói trong các gói plugin chung và được bao gồm trên toàn cầu trong tất cả các trang

sao chép

Chỉ cần thêm thuộc tính data-clipboard-target vào một nút hành động với phần tử đầu vào là

// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.value;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});

sao chép

________số 8_______

    

        
        

            
            
            

            
            
                Copy
            
            
        
        
    

Thêm

// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.value;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});

sao chép

// Select elements
const target = document.getElementById('kt_clipboard_2');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.innerText;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});

    

        
        
        

        
        
            Cut
        
        
    

Thêm

// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.value;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});

sao chép

// Select element
const target = document.getElementById('kt_clipboard_3');

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(target);

// Success action handler
clipboard.on('success', function (e) {
    const currentLabel = target.innerHTML;

    // Exit label update when already in progress
    if (target.innerHTML === 'Copied!') {
        return;
    }

    // Update button label
    target.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function () {
        target.innerHTML = currentLabel;
    }, 3000)
});

    

        
        
            Copy to clipboard
        
        
    

Thêm thuộc tính data-clipboard-target vào một nút hành động với phần tử tĩnh

// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.value;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});

Làm cách nào để sao chép văn bản vào clipboard js?

Làm cách nào để sao chép nội dung div vào khay nhớ tạm bằng JavaScript?

Làm cách nào để sao chép URL vào bảng tạm JavaScript?

Làm cách nào để sao chép văn bản vào clipboard trong Angular?