Yak shaving logs


My life is just yak shaving.

bootstrapのモーダルを利用している場合にclipboard.jsが動かない時の対処法

2017/08/01 #javascript #bootstrap #clipboard.js

By Yusuke Takita


こんにちは。Takitaです。

clipboard.jsを利用してbootstrapのモーダル上であるボタンをクリックしたら文字列をクリップボードにコピーする機能を開発していたのですが、なぜかクリップボードに文字列がコピーされずにハマってしまったので対応方法をメモします。

GitHubに上がっていたissueを参考にして対応しました。

Bootstrap's modal enforce focus for accessibility reasons but that causes problems with LOTS of third-party libraries, including clipboard.js.
https://github.com/select2/select2/issues?q=is%3Aissue+bootstrap+modal+is%3Aclosed
https://github.com/zeroclipboard/zeroclipboard/issues?q=is%3Aissue+bootstrap+modal+is%3Aclosed
https://github.com/twbs/bootstrap/issues?q=is%3Aissue+enforceFocus+is%3Aclosed

Bootstrap 3  $.fn.modal.Constructor.prototype.enforceFocus = function() {};
Bootstrap 4  $.fn.modal.Constructor.prototype._enforceFocus = function() {};

StackOverflowには上記を修正したPRが貼ってあり、すでにマージされているのですが、bootstrapの enforceFocus との競合が解消されていなかったため、暫定対応ではありますが、上記のコードでbootstrapの enforceFocus を上書きして対応しました。

このエントリーをはてなブックマークに追加

categories


最新記事


tags