كيفية نسخ النص إلى الحافظة باستخدام 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-9905">
                                            <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="/ar/post3050"
                                   title="Long Polling مقابل WebSocket في Kotlin: أيهما تختار للوقت الفعلي">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Long Polling مقابل WebSocket في Kotlin: أيهما تختار للوقت الفعلي"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Long Polling مقابل WebSocket في Kotlin: أيهما تختار للوقت الفعلي</h3>
                                    </div>
                                </a>
                                                            <a href="/ar/post7124"
                                   title="انتهاء جلسة PHP بعد 30 دقيقة: 3 طرق فعالة مع كود">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1542903660-eedba2cda473?w=800&q=80"
                                                 alt="انتهاء جلسة PHP بعد 30 دقيقة: 3 طرق فعالة مع كود"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">انتهاء جلسة PHP بعد 30 دقيقة: 3 طرق فعالة مع كود</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="/ar/forum11291"
                               class="sidebar-question"
                               title="كيفية إرجاع JSON في 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">
                                        js_student19                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    كيفية إرجاع JSON في Go: دليل كامل مع أمثلة                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ردود</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ar/forum11290"
                               class="sidebar-question"
                               title="كيفية تحديث TypeScript إلى أحدث إصدار باستخدام npm؟">
                                <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">
                                        js_student16                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    كيفية تحديث TypeScript إلى أحدث إصدار باستخدام npm؟                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ردود</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ar/forum11289"
                               class="sidebar-question"
                               title="هل هناك مزايا لـ map على unordered_map للمفاتيح البسيطة (int, string)؟">
                                <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">
                                        stack_user55                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    هل هناك مزايا لـ map على unordered_map للمفاتيح البسيطة (int, string)؟                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ردود</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ar/forum11288"
                               class="sidebar-question"
                               title="كيفية التقاط لقطة شاشة لموقع ويب باستخدام PHP؟">
                                <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">
                                        js_student44                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    كيفية التقاط لقطة شاشة لموقع ويب باستخدام PHP؟                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ردود</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ar/forum11287"
                               class="sidebar-question"
                               title="خطأ "Access restriction on class due to restriction on required library rt.jar" في Eclipse عند العمل مع WSDL">
                                <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">
                                        js_student92                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    خطأ "Access restriction on class due to restriction on required library rt.jar" في Eclipse عند العمل مع WSDL                                </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="/ar/forum10289">
                <span class="prelink-block__name"> إنشاء متجه من الأصفار بحجم معين في Rust</span>
      </a>
                <a class="prelink-block__item" href="/ar/forum8186">
                <span class="prelink-block__name"> تجاهل الحقول الجديدة في كائنات JSON عند استخدام Jackson</span>
      </a>
                <a class="prelink-block__item" href="/ar/forum8336">
                <span class="prelink-block__name"> كيفية جمع عناصر المكرر في مصفوفة ذات حجم ثابت في Rust؟</span>
      </a>
                <a class="prelink-block__item" href="/ar/forum9363">
                <span class="prelink-block__name"> كيفية تهيئة HashMap مباشرة (بطريقة حرفية) في Java؟</span>
      </a>
                <a class="prelink-block__item" href="/ar/forum8689">
                <span class="prelink-block__name"> خوارزمية البحث عن جميع قواسم العدد</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>