Kopieren & Einfügen & Das Web

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */       
}

-webkit-touch-callout: default   /* displays the callout */
-webkit-touch-callout: none      /* disables the callout */

<textarea id="ta">a bunch of text</textarea>

var ta = document.getElementById("ta");
ta.focus();
ta.select();

oder was auch immer. Außerdem, wenn sich ein Benutzer in einem Formularelement befindet, wählt der übliche Befehl „Alles auswählen“ nur den Text innerhalb der Grenzen dieses Elements aus, was ein gutes, erwartetes Verhalten ist.

Wenn Sie das Verhalten wünschen, dass der Text beim Anklicken ausgewählt wird, hier ist eine ziemlich prägnante jQuery-Methode dafür

$('#ta').on("focus", function(e) {
  e.target.select();
  $(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Der Teil mit mouseup erlaubt, dass der Text nach dem mouseup-Ereignis ausgewählt bleibt. Normalerweise deselektiert mouseup den Text und aktiviert den Cursor.

Ich mag diesen Weg, weil er nicht erzwingt, dass der gesamte Text *egal was* ausgewählt wird (was die Leute nicht mögen), sondern nur beim ersten Fokus. Wenn Sie also nach dem Fokus die Auswahl selbst ändern und nur einen Teil des Textes kopieren möchten, können Sie das tun.

Wenn Sie kein Klick-zum-Auswählen anbieten, macht das manchmal auch Leute unglücklich, also ist es eine Balance. Daher mag ich die oben genannte Fokus-zu-Auswahl-Methode, und dann lass es so sein.

Es gibt noch viel mehr über die Textauswahl mit JavaScript zu wissen, einschließlich Range Selection und Ähnlichem, was ziemlich kompliziert ist und besser für einen anderen Artikel aufgespart wird.

Programmgesteuertes Kopieren in die Zwischenablage

Diese Fähigkeit ist erst kürzlich in JavaScript aufgetaucht. Zum Zeitpunkt des Schreibens nur Chrome und IE. Dies geschieht über document.execCommand('copy');

Es gibt eine ganze Geschichte hier, mit der ich nicht ganz auf dem Laufenden bin. Ich glaube, es war hauptsächlich ein Sicherheitsbedenken, weshalb es in JavaScript unmöglich war. Nicht zu vergessen ein Bedenken wegen Geschmacklosigkeit (wer möchte schon eine Website besuchen, nur um festzustellen, dass seine Zwischenablage manipuliert wurde?). Aus welchem Grund auch immer, es ist wieder verfügbar.

Matt Gaunt bietet einige Beispielcodes

E-Mailen Sie mir an [email protected]

Kopieren

var copyEmailBtn = document.querySelector('.js-emailcopybtn');  
copyEmailBtn.addEventListener('click', function(event) {  
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');  
  var range = document.createRange();  
  range.selectNode(emailLink);  
  window.getSelection().addRange(range);  
    
  try {  
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  
    
  // Remove the selections - NOTE: Should use   
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();  
});

Das Kopieren von Text in die Zwischenablage war schon immer ein Wunsch. Wir mussten früher Flash verwenden, typischerweise eine Bibliothek namens ZeroClipboard. Hier ist ein Tutorial von David Walsh dazu.

Wie man mit/ohne Stil/Formatierung einfügt

Wenn Sie Text kopieren, wird er im Allgemeinen mit Formatierung übernommen.

Auf Macs gibt es jedoch den Befehl **Einfügen und Stil anpassen**, der *sehr* nützlich sein kann, um diese Formatierung zu entfernen, wenn Sie sie nicht möchten. Zum Beispiel beim Einfügen in eine E-Mail. Die übliche Tastenkombination dafür ist Command-Shift-V.

Ich bevorzuge im Allgemeinen dieses Verhalten, also habe ich das gemacht, indem ich es auf Command-V abgebildet habe (was das normale Einfügen überschreibt).

Sie können immer noch mit Formatierung über die Menüs einfügen, wenn Sie müssen.

Zusätzlicher Müll in der Zwischenablage

Haben Sie jemals Text von einer Website ausgewählt, nur um festzustellen, dass am Ende Ihrer Auswahl zusätzlicher Müll angehängt wurde, wenn Sie ihn einfügen? LESEN SIE MEHR UNTER FART-KNUCKLE.BUSINESS!!!

Tun Sie das nicht.

Ungeschickte beibehaltene Großschreibung

Sie können Text in CSS mit text-transform: uppercase; großschreiben. Dies führt jedoch zu einem ziemlich großen (nervigen) Funktionsunterschied beim Kopieren und Einfügen zwischen den Browsern.

Nachdem ich schnell getestet habe

• Firefox und IE **beachten den ursprünglichen Text** (was im DOM steht).
• Chrome, Safari, Opera und iOS **beachten die CSS**-Großschreibung.

Ich bevorzuge ersteres.

Block-Links können das Kopieren erschweren

In HTML5 haben wir gelernt, dass wir nun Anker-Tags um alles wickeln können, was wir wollen. Auch wenn sie Inline-Elemente sind, können wir sie ohne Bedenken wegen Ungültigkeit um Blöcke wickeln. Dies geschieht nicht ohne Konsequenzen.

Titel

Dies macht den gesamten Blocktitel ohne CSS-Unterstützung zu einem Link, macht den Titel aber etwas schwerer zu kopieren. Wenn man diese Markup-Struktur um eine Überschrift legt und h3 > a { display: block; } verwendet, wird es etwas einfacher, vorausgesetzt, die h3 hat etwas Padding, da man dann die Auswahl im Padding beginnen und sich bewegen kann.

Einerseits gibt es also eine größere Klickfläche, andererseits ist es etwas schwieriger zu kopieren (wenn Sie ein normaler Rechts-nach-links-Kopierer sind). Ihre Entscheidung.

Siehe den Pen Block titles kinda hard to copy von Chris Coyier (@chriscoyier) auf CodePen.

Manchmal kann die Blockstruktur selbst ärgerliche Situationen verursachen. Wie hier, Sie versuchen einen Filmtitel auszuwählen, aber ein Pixel zu weit und Sie erhalten einen Haufen seltsamen Textes an völlig unzusammenhängenden Positionen

Das ist hier kein riesiges Problem, da die Leute daran gewöhnt sind und wissen, wie sie zurücktreten und bekommen, was sie brauchen. Aber es ist erwähnenswert. Selbst Dinge wie die Flexbox-Sortierung können die Textauswahl völlig verändern, auch wenn visuell alles identisch aussieht.

Siehe den Pen flex ordering and selection von Chris Coyier (@chriscoyier) auf CodePen.

In die Konsole einfügen

Klassischer Anfängerfehler: Das „$ “ am Anfang von Konsolenbefehlen in Blogbeiträgen über die Durchführung von Terminalaktionen kopieren. HÄNDE HOCH, Leute. Nur ich? Verdammt. Jedenfalls gibt es eine ziemlich lustige Dotfile-Sache, die Sie warnt, wenn Sie das tun.

Noch mehr?

Haben Sie irgendwelche persönlichen Abneigungen gegen Kopieren und Einfügen oder die Auswahl im Allgemeinen im Web?