x
1
2
3
4
5
6
7
<div class="input input--actor input--copyable flex items-center gap" data-controller="input-copyable"> <input type="text" name="input_copyable" id="input_copyable" value="aqG9kbPKK7Wnt1kpCM4eM1V82X4fN9ws" readonly="readonly" data-input-copyable-target="input" /> <button type="button" class="btn btn--plain" data-action="input-copyable#copy"> <span class="icon icon--copy" aria-hidden="true"></span> <span class="sr-only">Copy to clipboard</span> </button></div>1
2
3
4
5
6
7
<div class="input input--actor input--copyable flex items-center gap" data-controller="input-copyable"> <%= text_field_tag "input_copyable", SecureRandom.base58(32), readonly: "readonly", data: { input_copyable_target: "input" } %> <button type="button" class="btn btn--plain" data-action="input-copyable#copy"> <span class="icon icon--copy" aria-hidden="true"></span> <span class="sr-only">Copy to clipboard</span> </button></div>1
2
3
4
.input--copied > button > .icon { animation: var(--animate-fade-out), var(--animate-slide-out-up); animation-duration: var(--time-500);}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "input" ] async copy() { this.#reset() this.#writeToClipboard() } async #writeToClipboard() { try { await navigator.clipboard.writeText(this.inputTarget.value) this.element.classList.add("input--copied") } catch {} } #reset() { this.element.classList.remove("input--copied") this.#forceReflow() } #forceReflow() { this.element.offsetWidth }}No notes provided.