Bootstrap modal funktioniert nicht mit Clipboard.js (auf Firefox)

Question

Ich habe eine Schaltfläche auf einem Bootstrap-modal, das einige Daten (in der Modalität angezeigt) in die Zwischenablage (mit clipboard.js) kopieren soll.

Modal scheint diese Aktion nicht zu unterstützen.

Wenn der Knopf, der das oben beschriebene Ereignis auslöst, außer modal ist, wirkt er wie ein Zauber! Also entschied ich mich, die Modal-Taste einen weiteren versteckten Knopf außerhalb des Modals auszulösen, damit die Aktion ausgeführt werden konnte. Aber es funktioniert immer noch nicht! Bitte helfen Sie, Code und Beispiel unten.

https://jsfiddle.net/w6rL9sqz/2/

js

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="js/clipboard.js"></script> 
<script src="js/clipboard.min.js"></script> 
<script> 
    $(document).ready(function() 
    { 

     //tooltip 
     $('.trigger-button').tooltip({ 
      trigger : 'click' 
     }); 

     $('.trigger-button').click(function() 
     { 
      $('.trigger-button').tooltip('show'); 
      setTimeout(function() 
      { 
       $('.trigger-button').tooltip('hide'); 
      }, 
      2000); 
      $('#copy-button').trigger('click'); 
     }); 

     // copy to clipboard 
     var yii2_ids = 1234567890; 
     $('#copy-button').click(function(){ 
      var clipboard = new Clipboard('#copy-button', { 
       text: function() 
       { 
        return yii2_ids; 
       } 
      }); 
      clipboard.on('success', function(e) { 
       console.log(e); 
      }); 
     }); 
    }); 
</script> 

html

<div class="container-fluid margin-top"> 
<div class="row"> 
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 search-div"> 
     <div class="row"> 
      <center> 
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
       <button id="copy-button" class="btn btn-primary" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard" style="display:none;">triggered-hidden</button> 
       <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button> 
       <textarea></textarea> 
      </div> 
      </center> 
     </div> 
     <br /> 
     <button class="btn btn-primary" data-target="#upload-ebook" data-toggle="modal" type="button">Modal</button> 
     <div class="modal fade bs-example-modal-lg" id="upload-ebook" tabindex="-1" role="dialog"> 
      <div class="modal-dialog modal-lg"> 
       <div class="modal-content"> 
        <div class="modal-body"> 
         <p style="text-align:left; background: black; color: white; padiing: 20px;"> 
          <samp><b>id = $id</b></samp><br> 
         </p> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

denke ich, Ihre Frage zu diesem Clipboard issue verwandt ist, die besagt, dass:

Bootstrap modale Fokus für die Zugänglichkeit Gründen erzwingen, aber das führt zu Problemen mit vielen Bibliotheken von Drittanbietern, einschließlich clipboard.js.

Sie können diese Funktionalität, indem Sie deaktivieren ...

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

Answer 2

Zu allererst Sie eine yii2_ids Variable zu schaffen;

var yii2_ids = 1234567890; 

Und zurückgeben, wie es ist, ohne zu übersteuern;

var yii2_ids = 1234567890; 
$('#copy-button').click(function(){ 
    var clipboard = new Clipboard('#copy-button', { 
     text: function() 
     { 
      return yii2_ids; 
     } 
    }); 

Sie müssen bekommen, was in modal mit jQuery geschrieben wird und in dieser Funktion zurück. Ich habe ein funktionierendes Beispiel für Sie in diesem jsFiddle gemacht.

EDIT: Wenn Code noch nicht auf Firefox funktioniert, funktioniert aber in anderen Browsern kann es ein Firefox-Caching Problem sein, die Sie durch eine vollständige Aktualisierung (STRG + F5) lösen können.

Answer 3

Einstellung enforceFocus Funktion des Bootstrap ist zu leeren eine dumme Art und Weise dieses Problem zu beheben. Das Entfernen von Code aus einer anderen Bibliothek sollte nicht zur Option "Gehe zu" führen, wenn es andere Möglichkeiten gibt, sie zu beheben. Der einzige Grund, warum die Kopie nicht in einem Bootstrap-Modal funktioniert, liegt darin, dass das Dummy-Element, das zum Kopieren des Texts erstellt wurde, außerhalb des Modals an den Body angehängt wird, was, wie wir wissen, den Fokus darauf oder seine Child-Elemente erzwingt . Um es zu beheben, müssen wir lediglich eine Containeroption zu clipboardjs hinzufügen, an die wir einen Verweis auf unser Modal Div übergeben können.Auf diese Weise wird das Dummy-Element innerhalb des Fokusbereichs angehängt und kann selbst Fokus erhalten, um den Text zu kopieren. Hier

ist der feste Code, der nicht Bootstrap berührt die enforceFocus: https://jsfiddle.net/uornrwwx/

Wenn Sie eine Kopiertaste in einem modalen haben, geben sie einen Hinweis auf den Modal:

new Clipboard("button-selector", { container: yourModalHtmlElement });