JavaScript का उपयोग करके क्लिपबोर्ड पर टेक्स्ट कैसे कॉपी करें?

Question

learn_code27 · 09.05.2026

JavaScript का उपयोग करके क्लिपबोर्ड पर टेक्स्ट कैसे कॉपी करें?

सभी को नमस्कार! मैं एक शुरुआती फ्रंटएंड डेवलपर हूँ और मुझे एक ऐसे कार्य का सामना करना पड़ा जो सरल लगता है लेकिन मुझे कठिनाई हो रही है। मुझे पेज पर एक "कॉपी" बटन लागू करना है ताकि उपयोगकर्ता एक क्लिक से टेक्स्ट (जैसे लिंक, कोड या जनरेटेड पासवर्ड) को क्लिपबोर्ड पर कॉपी कर सके। मैंने `document.execCommand('copy')` का उपयोग करने की कोशिश की, लेकिन मुझे पता चला कि कुछ ब्राउज़रों में यह अस्थिर रूप से काम करता है, और कंसोल में चेतावनियाँ दिखाई देती हैं कि यह विधि पुरानी हो चुकी है। इसके अलावा, मैं पूरी तरह से नहीं समझ पाया कि कॉपी करने से पहले टेक्स्ट को सही तरीके से कैसे चुना जाए, अगर वह `` या `

` में नहीं है, बल्कि सामान्य `<div>` या `<p>` में है।

यहाँ मेरे कोड का एक उदाहरण है जो ठीक से काम नहीं कर रहा है:

```javascript
function copyText() {
  const text = document.getElementById('myText').innerText;
  // अब 'text' को क्लिपबोर्ड पर कैसे कॉपी करूँ?
  // ऐसा करने की कोशिश की, लेकिन काम नहीं किया:
  document.execCommand('copy');
}
```

कृपया मुझे आधुनिक तरीका बताएं                    </div>

<div class="answers" id="answers-10709">
                                            <p>अभी तक कोई उत्तर नहीं।</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                लॉग इन करें                            </a>
                             उत्तर देने के लिए                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="ब्लॉग">
                        <h2 class="recomends-title">
                            ब्लॉग                        </h2>
                        <div class="blogs-container">
                                                            <a href="/hi/post899"
                                   title="Rust में OAuth 2.0 और JWT प्राधिकरण: पूर्ण गाइड">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80"
                                                 alt="Rust में OAuth 2.0 और JWT प्राधिकरण: पूर्ण गाइड"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Rust में OAuth 2.0 और JWT प्राधिकरण: पूर्ण गाइड</h3>
                                    </div>
                                </a>
                                                            <a href="/hi/post5326"
                                   title="कोटलिन साक्षात्कार कैसे पास करें: A से Z तक शीर्ष प्रश्न">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80"
                                                 alt="कोटलिन साक्षात्कार कैसे पास करें: A से Z तक शीर्ष प्रश्न"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">कोटलिन साक्षात्कार कैसे पास करें: A से Z तक शीर्ष प्रश्न</h3>
                                    </div>
                                </a>
                                                            <a href="/hi/post7698"
                                   title="Rust में स्ट्रक्चर का आरंभीकरण: त्वरित शुरुआत और उन्नत तरकीबें">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Rust में स्ट्रक्चर का आरंभीकरण: त्वरित शुरुआत और उन्नत तरकीबें"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Rust में स्ट्रक्चर का आरंभीकरण: त्वरित शुरुआत और उन्नत तरकीबें</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        हाल के                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/hi/forum11299"
                               class="sidebar-question"
                               title="वर्तमान iPhone या iOS डिवाइस का मॉडल Swift में कैसे पता करें?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        python_newbie26                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    वर्तमान iPhone या iOS डिवाइस का मॉडल Swift में कैसे पता करें?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 जवाब</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/hi/forum11298"
                               class="sidebar-question"
                               title="Go में बहु-फ़ाइल प्रोजेक्ट की संरचना को सही ढंग से कैसे व्यवस्थित करें?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        byte_coder19                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Go में बहु-फ़ाइल प्रोजेक्ट की संरचना को सही ढंग से कैसे व्यवस्थित करें?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 जवाब</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/hi/forum11297"
                               class="sidebar-question"
                               title="PDO क्वेरी में IN() शर्त के साथ ऐरे को कैसे बांधें?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        code_learner88                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    PDO क्वेरी में IN() शर्त के साथ ऐरे को कैसे बांधें?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 जवाब</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/hi/forum11296"
                               class="sidebar-question"
                               title="TypeScript: setTimeout का सही उपयोग कैसे करें (window बनाम Node.js)?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        byte_coder51                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    TypeScript: setTimeout का सही उपयोग कैसे करें (window बनाम Node.js)?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 जवाब</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/hi/forum11295"
                               class="sidebar-question"
                               title="getName(), getCanonicalName() और getSimpleName() में Java में क्या अंतर है?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        byte_coder16                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    getName(), getCanonicalName() और getSimpleName() में Java में क्या अंतर है?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 जवाब</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="समान प्रश्न">
  <h3 class="prelink-block__title">समान प्रश्न</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/hi/forum9960">
                <span class="prelink-block__name"> जब Iterator::map Result::Err लौटाता है तो पुनरावृत्ति कैसे रोकें और त्रुटि लौटाएं?</span>
      </a>
                <a class="prelink-block__item" href="/hi/forum9641">
                <span class="prelink-block__name"> Proguard-rules.pro में पैकेज जोड़ने के बाद Proguard Missing classes पर error दे रहा है</span>
      </a>
                <a class="prelink-block__item" href="/hi/forum6245">
                <span class="prelink-block__name"> Rust में Vec<T> को [T; N] एरे में कैसे बदलें?</span>
      </a>
                <a class="prelink-block__item" href="/hi/forum7596">
                <span class="prelink-block__name"> Swift में किसी array के पहले 5 तत्व कैसे प्राप्त करें?</span>
      </a>
                <a class="prelink-block__item" href="/hi/forum9424">
                <span class="prelink-block__name"> C# में इंटरफेस की इम्प्लिसिट और एक्सप्लिसिट इम्प्लीमेंटेशन: कब और कौन सी उपयोग करें?</span>
      </a>
      </div>
</section>

<script src="/js/jquery-3.6.1.min.js"></script>

<script defer src="/js/bootstrap.bundle.min.js"></script>
<script defer src="/js/main.js"></script>

<script>
(function () {
    var loaded = false;

// dataLayer и gtag объявляем ДО загрузки скрипта — GA сам его найдёт
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    window.gtag = gtag; // делаем глобальным, чтобы была доступна везде

function loadAnalytics() {
        if (loaded) return;
        loaded = true;

// Снимаем все слушатели сразу
        EVENTS.forEach(function (e) {
            window.removeEventListener(e, loadAnalytics, { passive: true });
        });

// ── Яндекс.Метрика ────────────────────────────────────────
        (function (m, e, t, r, i, k, a) {
            m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments); };
            m[i].l = 1 * new Date();
            // Не грузим дважды, если тег уже есть
            for (var j = 0; j < document.scripts.length; j++) {
                if (document.scripts[j].src === r) return;
            }
            k = e.createElement(t);
            a = e.getElementsByTagName(t)[0];
            k.async = 1;
            k.src = r;
            a.parentNode.insertBefore(k, a);
        })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');

ym(109681950, 'init', {
            clickmap:          true,
            trackLinks:        true,
            accurateTrackBounce: true,
            webvisor:          true
        });

// ── Google Analytics ──────────────────────────────────────
        var gaScript = document.createElement('script');
        gaScript.src   = 'https://www.googletagmanager.com/gtag/js?id=G-3NHBQWNX9T';
        gaScript.async = true;
        // После загрузки скрипта инициализируем конфиг
        gaScript.onload = function () {
            gtag('js',     new Date());
            gtag('config', 'G-3NHBQWNX9T');
        };
        document.head.appendChild(gaScript);
    }

// Запускаем через 3 секунды ИЛИ при первом взаимодействии
    var timer  = setTimeout(loadAnalytics, 3000);
    var EVENTS = ['scroll', 'click', 'mousemove', 'touchstart', 'keydown'];

EVENTS.forEach(function (e) {
        window.addEventListener(e, function fireOnce() {
            clearTimeout(timer);       // отменяем таймер — пользователь уже здесь
            loadAnalytics();
            window.removeEventListener(e, fireOnce, { passive: true });
        }, { passive: true });
    });

})();
</script>

<noscript>
    <div>
        <img src="https://mc.yandex.ru/watch/109681950"
             style="position:absolute;left:-9999px"
             alt="Яндекс.Метрика">
    </div>
</noscript>

<div id="cookie-overlay">
    <div class="co-box">
        <div class="co-icon">🍪</div>
        <div class="co-title">Сначала примите условия</div>
        <p class="co-text">
            Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie.
            Мы используем их для авторизации и улучшения работы сайта.<br><br>
            <a href="/privacy" target="_blank">Политика конфиденциальности</a>
        </p>
        <button class="co-accept" onclick="cookieConsentAccept()">Принять и продолжить</button>
        <button class="co-skip" onclick="document.getElementById('cookie-overlay').classList.remove('active')">Закрыть</button>
    </div>
</div>

<div id="cookie-banner">
    <div class="cb-inner">
        <div class="cb-text">
            🍪 Мы используем <strong>файлы cookie</strong> для авторизации, аналитики и улучшения работы сайта.
            Продолжая пользоваться сайтом, вы соглашаетесь с нашей
            <a href="/privacy" target="_blank">политикой конфиденциальности</a>.
        </div>
        <div class="cb-buttons">
            <button class="cb-accept" onclick="cookieConsentAccept()">Принять</button>
            <button class="cb-necessary" onclick="cookieConsentNecessary()">Только необходимые</button>
        </div>
    </div>
</div>

function getCk(name) {
        var m = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
        return m ? decodeURIComponent(m[1]) : null;
    }
    function setCk(name, val) {
        var exp = new Date();
        exp.setFullYear(exp.getFullYear() + 1);
        document.cookie = name + '=' + encodeURIComponent(val)
            + '; expires=' + exp.toUTCString()
            + '; path=/; SameSite=Lax';
    }

// Принять всё
    window.cookieConsentAccept = function () {
        setCk(KEY, 'accepted');
        hideBanner();
        document.getElementById('cookie-overlay').classList.remove('active');
        // Если была попытка перейти на логин — редиректим
        if (window._ckPendingHref) {
            window.location.href = window._ckPendingHref;
            window._ckPendingHref = null;
        }
    };

// Только необходимые (баннер убираем, но трекинг не разрешаем)
    window.cookieConsentNecessary = function () {
        setCk(KEY, 'necessary');
        hideBanner();
    };

function hideBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'none';
    }
    function showBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'block';
    }

// При загрузке: если согласие не дано — показываем баннер
    if (!getCk(KEY)) {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', showBanner);
        } else {
            showBanner();
        }

// Перехватываем клики на /login и /registration
        document.addEventListener('click', function (e) {
            var el = e.target.closest('a[href]');
            if (!el) return;
            var href = el.getAttribute('href') || '';
            // Используем el.href — он всегда абсолютный, ловим и "login" и "/login"
            var normalizedHref = el.href || href;
            var isAuth = /\/login(\?|$|#)/i.test(normalizedHref) || /\/registration(\?|$|#)/i.test(normalizedHref);
            if (isAuth) {
                e.preventDefault();
                e.stopImmediatePropagation();
                window._ckPendingHref = href;
                document.getElementById('cookie-overlay').classList.add('active');
            }
        }, true);
    }
})();
</script>
</body>
</html>