เพิ่มกล่องโค้ดพร้อมปุ่มคัดลอกคลิปบอร์ด (โดยใช้ HTML, CSS และ JS)

0 


1.  ไปที่ มุมมอง HTML เพิ่ม CSS ลงใต้โพสต์ของคุณ
 
       <style>
          .code-box {
              position: relative;
              border-radius: 5px;
              font-family: arial;
              font-size: 14px;
              border: 1px dashed #CCCCCC;
              width: 99%;
              height: auto;
              overflow: auto;
              background: #f0f0f0;
              background-image:URL(https://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);
              padding: 5px;
              text-align: left;
              }

          pre.codex {
              color:#008000;
              word-wrap:normal;
              background-color: #0000 !important;
              line-height: 1.55;
          }

          .copy-button {
              position: absolute;
              top: 5px;
              right: 5px;
              padding: 5px 10px;
              background-color: #4CAF50;
              color: #fff;
              border: none;
              border-radius: 3px;
              cursor: pointer;
              margin: 5px;
          }
        </style>
    

2. เพิ่มฟังก์ชั่น copy code
 
<script>
    function copyCode(button) {
        // หาช่อง div ที่ปุ่มอยู่
        var codeBox = button.closest('.code-box');
        if (codeBox) {
            var codeElement = codeBox.querySelector('.codex');
            if (codeElement) {
                // สร้าง Range เพื่อเลือกข้อความ
                var range = document.createRange();
                range.selectNode(codeElement);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();

                // เปลี่ยนข้อความปุ่มชั่วคราว
                button.innerText = 'Copied!';
                setTimeout(function () {
                    button.innerText = 'Copy Code';
                }, 1500);
            }
        }
    }
</script>
    

3. ไปที่ มุมมองเขียน ทุกที่ที่คุณต้องการให้ Codebox ปรากฏในบล็อกโพสต์ของคุณ ให้ใช้รหัส HTML ด้านล่าง
  <div class="code-box">
    <pre class="codex">
     
     เพิ่มโค้ดที่นี่

    </pre>

    <button class="copy-button" onclick="copyCode(this)">Copy Code</button>
  </div>
    

ที่มาครูสมชายคัดมาจาก : อ้างอิงที่มา
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
   I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                   THANKS FOR VISITING  thumariya.blogspot
Have a nice day!
--------------------------                          -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
--------------------------                          -------------------------
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า