Cara membina butang coretan kod salin dan sebab ia penting

Sejak 2025, saya mengalami sindrom carpal tunnel. Untuk mengurangkan kesakitan, saya bereksperimen dengan menggunakan suara saya untuk pengekodan, penyemakan imbas web dan kerja komputer. Ia tidak mudah, dan sukar untuk memahami bagaimana teknologi bermusuhan kepada orang yang mempunyai masalah mobiliti melainkan anda mengalaminya secara langsung. Sesiapa yang mengenali saya tahu bahawa saya sentiasa menjadi penyokong kuat web boleh diakses dan amalan boleh diakses, tetapi ini adalah kali pertama saya mengalami pergerakan tangan yang terhad dan saya tidak pernah menyedari bahawa ia akan mengambil jumlah minimum usaha daripada pengguna untuk mencapai kepentingan tugas.

Menggunakan arahan suara untuk menyerlahkan blok kod dan menyalinnya adalah amat sukar, sekurang-kurangnya tidak mungkin untuk saya sekarang (sama ada sangat mustahil, atau saya masih belum menemui jalan untuk menyemak imbas dan pengekodan web tanpa menggunakan tangan). komputer memerlukan banyak kuasa otak). Oleh itu, apabila menulis tentang kod, dan terutamanya apabila membuat tutorial yang melibatkan pembaca menyalin dan menampal kod, adalah perlu untuk menyediakan cara untuk orang yang mempunyai pergerakan tangan terhad untuk menyalin kod dengan satu klik .

Sebelum saya mendapat sindrom carpal tunnel, saya fikir butang salin kod adalah berlebihan. Tetapi saya silap. Jadi salah satu tugas pengekodan berasaskan pertuturan pertama saya ialah menambah butang salin kod pada semua coretan kod dalam catatan blog saya. Saya sedang mengusahakan catatan blog lain tentang perjalanan saya dengan pengekodan pertuturan, tetapi jika anda berminat, alatan yang saya gunakan ialah Talon dan Cursorless dalam VSCode. Mempelajari semula cara melakukan segala-galanya pada komputer dengan suara telah menjadi keluk pembelajaran yang curam, tetapi keseluruhan proses telah menghilangkan sedikit kesakitan daripada saya. Ya, saya menulis catatan blog ini dengan suara apabila boleh.

Penyelesaian butang coretan salinan saya ditulis dalam HTML tulen, CSS dan JavaScript dalam projek Eleventy menggunakan enjin templat JavaScript (oleh itu penggunaan interpolasi rentetan dengan pendakap kerinting).

HTML (dan beberapa JavaScript awal untuk membina HTML)

Dalam catatan blog tentang kod, anda mungkin mempunyai berbilang coretan blok kod pada halaman. Oleh itu, anda perlu menetapkan setiap blok kod ID unik untuk mencari kandungan yang betul untuk disalin. Anda boleh menjana ID unik dengan cara yang anda suka, seperti menggunakan pustaka luaran, tetapi inilah yang saya lakukan untuk setiap coretan pada masa binaan.

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

Memandangkan blok kod yang diformatkan dan diserlahkan sintaks akan mengandungi kelas HTML dan CSS tambahan untuk meningkatkan pemformatan dan penyerlahan, kami perlu memastikan bahawa butang salin hanya menyalin kandungan kod asal ke papan keratan. Penyelesaian saya adalah untuk menyimpan rentetan kod asal dalam teg meta untuk mendapatkan semula dengan mudah dalam JavaScript (berbanding menanggalkan teg HTML yang berlebihan; walaupun begitu, kami tidak mahu menanggalkan teg HTML daripada coretan HTML!). Anda juga perlu menggunakan `encodeURIComponent` apabila menyimpan rentetan kod mentah dalam teg meta supaya kod itu tidak dilaksanakan pada halaman (cth. kod JavaScript). Tag meta ini terletak di sebelah setiap blok kod dalam catatan blog saya.

<meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"></meta>

Seterusnya, tambahkan butang di sebelah blok kod atau blok kod untuk memetik pengecam unik yang anda buat sebelum ini. Saya juga memilih untuk menambah ikon SVG Clipboard kecil di sebelah teks butang. Jika anda memilih butang yang ditinggalkan dan hanya gunakan ikon, pastikan anda menggunakan `Aria-Label` untuk memastikan bahawa butang mempunyai teknologi tambahan (seperti pembaca skrin) yang dapat difahami (seperti" Salinan Saluran Fragment ").

Salin

gaya CSS

Saya tidak akan menentukan cara menetapkan gaya butang salinan ini dalam catatan blog anda sendiri, tetapi saya memilih untuk meletakkannya di sudut kanan atas setiap blok kod. Pastikan anda memasukkan tumpuan, aktiviti, dan fokus pada butang untuk memastikan bahawa mereka yang tidak menggunakan artikel blog membaca tetikus dan menggunakan papan kekunci atau navigasi suara untuk mengklik elemen dengan jelas mengetahui elemen yang sedang dalam keadaan fokus dan telah diklik.

kod javascript

Akhirnya, gunakan JavaScript untuk mencari setiap butang salinan pada halaman dan tambahkan pendengar acara berikut ke setiap butang. Kod ini memperoleh pengecam unik serpihan kod asal dari butang, mendapati tanda metad yang berkaitan, dan menyalin kod asal yang disimpan dalam penanda meta ke papan klip. Pastikan serpihan kod asal disalin ke bentuk asalnya.

Penyelesaian ini boleh dipindahkan ke rangka kerja depan kegemaran anda. Ingat, kecacatan sementara mungkin berlaku kepada sesiapa sahaja;

Atas ialah kandungan terperinci Cara membina butang coretan kod salin dan sebab ia penting. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!