1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Railsでクリップボード機能を実装する。

Posted at

#環境
Rails 5.2.3
Ruby 2.6.3

#1. application.js でclipboard.jsを読み込む。

//= require clipboard.min

*jqueryを使えるようにしておいてください。

#2. viewにボタンを置く。

  <a class="btn btn-sm btn-clipboard" data-clipboard-target="#text">
   <i class="fa fa-clipboard" aria-hidden="true"></i>
  </a>

data-clipboard-targetにコピーしたい要素のidなどを指定します。
コピーさせたい文字列を直接指定する場合はdata-clipboard-text=""となります。

#3. javascriptでClipboardのオブジェクトを作成する。

var clipboard = new Clipboard('.btn-clipboard');

以上で簡単に実装できました。

#ちなみに.... area_hidden="true"とは
 fontawesomeなどでよく見るので軽く調べてみました。
 trueになっているとスクリーンリーダーによる読み上げをスキップできるそうです。

 障害をもった方を含めすべての人が快適に使えるように「アクセシビリティ」についても勉強していきたいと思っている今日この頃です。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?