{"id":19655731,"url":"https://github.com/ryanpcmcquen/cheval","last_synced_at":"2025-04-07T17:07:48.260Z","repository":{"id":57156048,"uuid":"43983536","full_name":"ryanpcmcquen/cheval","owner":"ryanpcmcquen","description":":clipboard: Copy to the clipboard using JavaScript without writing JS. A full solution for all browsers and all devices. LibreJS compliant.","archived":false,"fork":false,"pushed_at":"2021-05-12T17:19:22.000Z","size":103,"stargazers_count":244,"open_issues_count":1,"forks_count":11,"subscribers_count":7,"default_branch":"gh-pages","last_synced_at":"2025-04-05T13:43:21.426Z","etag":null,"topics":["cheval","clipboard","clipboard-javascript","clipboardjs","copy-paste","copy-to-clipboard","hacktoberfest","javascript","librejs","librejs-compliant"],"latest_commit_sha":null,"homepage":"https://ryanpcmcquen.org/cheval/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanpcmcquen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-09T22:42:02.000Z","updated_at":"2025-02-16T23:20:48.000Z","dependencies_parsed_at":"2022-08-28T05:50:26.277Z","dependency_job_id":null,"html_url":"https://github.com/ryanpcmcquen/cheval","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanpcmcquen%2Fcheval","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanpcmcquen%2Fcheval/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanpcmcquen%2Fcheval/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanpcmcquen%2Fcheval/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanpcmcquen","download_url":"https://codeload.github.com/ryanpcmcquen/cheval/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cheval","clipboard","clipboard-javascript","clipboardjs","copy-paste","copy-to-clipboard","hacktoberfest","javascript","librejs","librejs-compliant"],"created_at":"2024-11-11T15:23:30.515Z","updated_at":"2025-04-07T17:07:48.236Z","avatar_url":"https://github.com/ryanpcmcquen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cheval :clipboard:\n\n[![Downloads](https://img.shields.io/badge/jsDelivr-100k%2B%20downloads-green.svg?style=rounded)](https://www.jsdelivr.com/package/gh/ryanpcmcquen/cheval)\n[![GitHub license](https://img.shields.io/github/license/ryanpcmcquen/cheval.svg)](https://github.com/ryanpcmcquen/cheval/blob/gh-pages/LICENSE)\n\n\u003cimg alt=\"Cheval glass\" width=\"250\" src=\"https://usercontent.irccloud-cdn.com/file/3kF3sGJE/Jekyll.and.Hyde.Ch10.Drawing2.jpg\"\u003e\n\nJust include the library (~2kB!):\n\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js\"\u003e\u003c/script\u003e\n\nhttps://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js\n\nProvided by:\n\n[![jsDelivr](https://usercontent.irccloud-cdn.com/file/VDPwfxpi/jsDelivr_logo.png)](https://www.jsdelivr.com/)\n\nThen use the following elements:\n\n1. `\u003ctextarea\u003e` with the class `text-to-copy` (can be `readonly` but _not_ `disabled`)\n2. `\u003cbutton\u003e` with the class `js-copy-btn`\n\nThe library takes cares of the rest. :shipit:\n\n:newspaper: You don't have to write any JavaScript to use it!\n\nAlternatively, you can use the project with npm:\n\n```\nnpm install cheval\n```\n\n---\n\n#### Featured in MarkApp!\n\n[![MarkApp](https://usercontent.irccloud-cdn.com/file/X2uIqOZA/Screen%20Shot%202017-10-17%20at%208.23.37%20AM.png)](http://markapp.io)\n\n---\n\n#### So what?! Where does it work?\n\nAlmost everywhere!\n\nDesktop:\n\n-   Chrome/Chromium 42+\n-   Firefox 41+\n-   Internet Explorer 9+\n-   Opera 29+\n-   Safari 10+\n\nAndroid:\n\n-   Chrome 42+\n-   Firefox 41+\n\niOS:\n\n-   10+\n\n##### What about other browsers?\n\nEverywhere else (old versions of Safari), it will select the text. The library detects iDevices and will change the inital button text to `Select text` (to avoid confusing the user). After clicking it will say either `Now tap 'Copy'` (iPhone) or `Now tap the text, then 'Copy'` (iPad), to account for the strange behavioral differences of these devices.\n\nOn desktop Safari (\u003c v10), the button will change to `Press Command + C to copy`.\n\nOn failure the button will say `Please copy manually`.\n\n---\n\n:warning: If you want your textarea to be invisible for some reason, use this CSS:\n\n```css\n.text-to-copy {\n    opacity: 0;\n    position: absolute;\n}\n```\n\nBecause it will not work with `display: none;` or `visibility: hidden;`. :thumbsup:\n\nNote that you should also supplement that CSS with something like this helper library, otherwise people on iOS will not be able to copy at all since Safari doesn't support cool stuff:\n\nhttps://gist.github.com/ryanpcmcquen/1229119ffcf5098543c0\n\n#### What else is cool?\n\nIf you aren't concerned with maximum compatibility, you can use elements besides a `textarea`.\n\nYou may also add multiple copy elements and buttons to each page, using the following format:\n\n```html\n\u003ctextarea class=\"text-to-copy-0\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"js-copy-btn-0\"\u003e\u003c/button\u003e\n\n\u003ctextarea class=\"text-to-copy-1\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"js-copy-btn-1\"\u003e\u003c/button\u003e\n\n\u003ctextarea class=\"text-to-copy-2\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"js-copy-btn-2\"\u003e\u003c/button\u003e\n\n\u003ctextarea class=\"text-to-copy-3\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"js-copy-btn-3\"\u003e\u003c/button\u003e\n```\n\nThe characters after the dash in `text-to-copy-` or `js-copy-btn-` can be anything, they just have to match between the button and element.\n\nFor example:\n\n```html\n\u003ctextarea class=\"text-to-copy-email\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"js-copy-btn-email\"\u003e\u003c/button\u003e\n```\n\nPositioning of the elements and buttons does not matter, they do not need to be near each other on the page. This allows you to write declarative markup and not be concerned with the inner workings of this library. Enjoy!\n\n---\n\n#### But ...\n\n###### I want to dynamically add elements to my page, `cheval` only runs on page load!\n\nYou're right! That's why in version `1.3.0`, `cheval` also adds itself to global scope.\n\nNow you can invoke at will on dynamic elements!\n\n```js\ncheval('.dynamic-js-copy-btn', '.dynamic-text-to-copy');\n```\n\n---\n\nWhat does `cheval` mean?\n\nThe name comes from Cheval glass, a type of mirror.\n\n---\n\nThis project is LibreJS compliant!\n\n[![LibreJS](https://www.gnu.org/software/librejs/images/logo-medium.png)](https://www.gnu.org/software/librejs/)\n\n---\n\nIf you prefer using specific tags instead of the latest version, you may specify a tag in the `jsDelivr` URL:\n\nhttps://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@2.0.0/cheval.min.js\n\n---\n\n### Contributing:\n\nIf you wish to contribute to this project, pull requests are always welcome! Please make sure that any changes pass through [![http://jslint.com/](http://jslint.com/image/jslintpill.gif)](http://jslint.com/) with the following options before submitting them:\n\n```js\n/*global module, window*/\n/*jslint browser: true*/\n```\n\n---\n\nThanks to [Lea Verou](https://github.com/LeaVerou) for lots of support and help with the name.\n\nThanks to Nikita Tcherednikov for the Cheval icon, provided under the [Creative Commons license](https://creativecommons.org/licenses/by/3.0/us/).\n\nThanks to Charles Raymond Macauley for the drawing available [here](https://commons.wikimedia.org/wiki/File:Jekyll.and.Hyde.Ch10.Drawing2.jpg). (Public domain)\n\nThanks to BrowserStack and Koding!\n\n[![https://browserstack.com](https://usercontent.irccloud-cdn.com/file/1egf6j3q/BrowserStack_logo.png)](https://browserstack.com)\n\n\u003ca href=\"https://koding.com/\"\u003e\n    \u003cimg\n         src=\"https://koding-cdn.s3.amazonaws.com/badges/made-with-koding/v1/koding_badge_RectangleColor.png\"\n         srcset=\"https://koding-cdn.s3.amazonaws.com/badges/made-with-koding/v1/koding_badge_RectangleColor.png 1x, https://koding-cdn.s3.amazonaws.com/badges/made-with-koding/v1/koding_badge_RectangleColor@2x.png 2x\"\n         alt=\"Made with Koding\"/\u003e\n\u003c/a\u003e\n\n---\n\nFull download stats available here:\n\nhttps://data.jsdelivr.com/v1/package/gh/ryanpcmcquen/cheval/stats?from=2014-01-01\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanpcmcquen%2Fcheval","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanpcmcquen%2Fcheval","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanpcmcquen%2Fcheval/lists"}