2016-11-10 7 views
1

Clipboard.jsで入力値をコピーしようとしています:https://clipboardjs.com/。入力がモーダルに位置しています:Clipboard.jsがブートストラップモーダルで動作しません

http://codepen.io/Deka87/pen/eBJOKY

new Clipboard('#copy', { 
    text: function(trigger) { 
     return $("#copy-input").val(); 
    } 
}); 

それは外モーダルの動作しますが、入力やコピーボタンをモーダルウィンドウに配置されている場合、それが動作するように失敗しました。私はモーダルウィンドウが開いた後にクリップボード関数を初期化しようとしました:

$(".modal").on("shown.bs.modal", function() { 
    new Clipboard('#copy', { 
     text: function(trigger) { 
      return $("#copy-input").val(); 
     } 
    }); 
}); 

しかし、それは問題を解決しませんでした。何か案は?

+0

問題は、ブートストラップモーダルとの非互換性に関する記録された:)ことを無視するにconsole.logを削除するのを忘れます。https:/ /github.com/zenorocha/clipboard.js/issues/155 – peter

答えて

2

このフォークを試してみてください:http://codepen.io/anon/pen/NbxWbQ が、私はこれだけ

<input type="text" class="form-control" id="copy-input" value="Copied successfully!"/> 
    <br /> 
    <a href="#" id="copy" data-clipboard-target="#copy-input" class="btn btn-default">Copy input content to clipboard</a> 

$(".modal").on("shown.bs.modal", function() { 
    console.log('a', Clipboard, $('#copy'), $("#copy-input").val()); 
    var clipboard = new Clipboard('#copy') 
}); 
+0

これを少し複雑にしました。クリップボードの基本的な例を使用するだけでした。:) – marcinrek

関連する問題