kode untuk postingan : Membuat text area mirip seperti lembar kerja Microsoft Word

kode untuk postingan : Membuat text area mirip seperti lembar kerja Microsoft Word

<!DOCTYPE html> <html> <head> <title>Area Kerja</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .toolbar { background-color: #eee; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1; } .toolbar button { background-color: #fff; border: none; padding: 5px 10px; margin-right: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; position: relative; transition: all 0.2s ease-in-out; } .toolbar button:hover { background-color: #ddd; } .toolbar button:active { transform: translateY(1px); box-shadow: none; } .toolbar button:last-child { margin-right: 0; } .workspace { margin: 60px auto 0 auto; padding: 20px; width: 80%; min-height: 500px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; z-index: 0; } .workspace::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc; z-index: -1; } .workspace div { margin: 0; padding: 0; line-height: 1.5; } .workspace:focus { outline: none; } </style> </head> <body> <div class="toolbar"> <button id="copyBtn">Copy</button> <button id="selectAllBtn">Select All</button> </div> <div class="workspace" data-editable> <div>Type your text here...</div> </div> <script> const copyBtn = document.getElementById("copyBtn"); const selectAllBtn = document.getElementById("selectAllBtn"); const workspace = document.querySelector(".workspace"); copyBtn.addEventListener("click", () => { document.execCommand("copy"); copyBtn.innerText = "Copied!"; setTimeout(() => { copyBtn.innerText = "Copy"; }, 2000); }); selectAllBtn.addEventListener("click", () => { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(workspace); selection.removeAllRanges(); selection.addRange(range); }); </script> </body> </html>
Silahkan PASTE kan di lebar HTML anda Pada Blog anda..selamat Mencoba

SEPUTAR CODINGAN

Popular Posts

Flickr

Sponsor

Labels

kode untuk postingan : Membuat text area mirip seperti lembar kerja Microsoft Word

About Ungu Fotocopy Cipayung Center

0 Comments:

Posting Komentar

Popular Posts

Flickr

Sponsor

Labels

kode untuk postingan : Membuat text area mirip seperti lembar kerja Microsoft Word

About Ungu Fotocopy Cipayung Center

RELATED POSTS

0 Comments:

Posting Komentar