Clipboard

clipboard.erb

<div>
  <div data-controller="clipboard" class="flex flex-row mt-4 p-6">
    <input type="text" class="form-input text-black" value="SeCrEtKeY-42!" data-clipboard-target="source" readonly />

    <button class="mx-4 flex px-3 py-2 bg-slate-900 font-semibold rounded" data-clipboard-target="button" data-action="clipboard#copy">
      Copy
    </button>
  </div>

  <div data-controller="clipboard" class="flex flex-row mt-4 p-6">
    <input type="text" class="form-input text-black" value="BRUG" data-clipboard-target="source" readonly />

    <button class="mx-4 flex px-3 py-2 bg-slate-900 font-semibold rounded" data-clipboard-target="button" data-action="clipboard#copy">
      Copy
    </button>
  </div>

  <input type="text" class="my-4 text-black form-input" value="" placeholder="Test here" data-clipboard-target="source" />

  <script src="https://gist.github.com/krzykamil/5e90208b22cdbcdd2e45ec1f677ab6c8.js"></script>
</div>

clipboard_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["source", "button"];

  //We have two controller instances, both can distinguish only their targets, so having copy button per controller instance is fine
  copy() {
    navigator.clipboard.writeText(this.sourceTarget.value);
  }
}