🍪 Privacy & Transparency

We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page..

Vendor List | Privacy Policy
Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry PI

Menu
  • Projekte
    • LED’s
    • Servo & Schrittmotoren
    • Sound
    • LCD’s
    • Kommunikation
    • Sicherheit
    • Weekend Project
  • Arduino
    • Tutorials
    • ProMini
      • Anschließen & Programmieren
    • Nano
      • Arduino Nano – Übersicht
    • UNO
      • Übersicht
    • MEGA 2560
      • Übersicht
    • Leonardo
      • Übersicht
    • NodeMCU
      • NodeMCU – “Einer für (fast) Alles!”
    • Lilypad
      • Arduino: Lilypad “Jetzt Geht’s Rund!”
    • WEMOS
      • WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip
      • WEMOS D1 Mini – Übersicht
      • Wemos D1 mini Shields
    • STM32x
      • STM32F103C8T6 – Übersicht
    • Maker UNO
      • Maker UNO – Überblick und Test
    • ATTiny85
      • Mini Arduino mit ATTiny85 Chip
      • ATtiny85 mit dem Arduino UNO beschreiben
  • Android
  • Über mich
  • DeutschDeutsch
  • EnglishEnglish
Menu

Ausschneiden, Kopieren und Einfügen mit JavaScript und jQuery

Posted on 6. November 20152. Mai 2023 by Stefan Draeger

Da man nicht immer auf das Kontextmenü zugreifen kann, zbsp. bei einem Touch Monitor, ist es sinnvoll einige Aktionen über Schaltflächen anzubieten.
Da hier wieder sehr viel vom Browser abhängt gibt es eigentlich nur 2 Ansätze, entweder über JavaScript und jQuery oder aber mit Adobe Flash. Zum Thema Adobe Flash werde ich separat ein Tutorial schreiben.

  • Browserkompatibilität
    • Mozilla FireFox, Google Chrome support
    • Microsoft Internet Explorer
  • Ausschneiden
  • Kopieren
  • Einfügen
  • Der Aufruf der Funktionen, Ausschneiden, Kopieren und Einfügen
  • Beispiel auf jsfiddle

Browserkompatibilität

Da hier jeder Browser sein eigenes Süppchen kocht, ist es schwierig selbst mit jQuery eine einheitliche Schnittstelle für diesen Support zu bieten.
Zu diesem Thema wird der Microsoft Internet Explorer am besten unterstützt. Und leider ist dieser auch der einzige welche alle 3 Funktionen bietet.

Mozilla FireFox, Google Chrome support

FireFox und Chrome unterstützen aus diesem Script nur die Funktionen „Ausschneiden“ und „Kopieren“, bei der Funktion „Einfügen“ wird eine Fehlermeldung geworfen, was auch das try catch um den Funktionsaufruf erklärt.

Microsoft Internet Explorer

Der Microsoft Internet Explorer erzeugt beim ersten Aufruf einer der Funktionen folgenden Dialog, welcher vom Benutzer bestätigt werden muss, damit die Seite auf die Zwischenablage zugreifen kann.

Internet Explorer, Dialog zum erlauben / verweigern des Zugriffs auf die Zwischenablage.
Internet Explorer, Dialog zum Erlauben / verweigern des Zugriffs auf die Zwischenablage.

Ausschneiden

function cut(elementId) {
    var textareaElement = $('#' + elementId);
    textareaElement.select();
    try {
        var successful = document.execCommand('cut');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Cutting text command was ' + msg);
    } catch (err) {
        console.error('Oops, unable to cut');
    }
}

Kopieren

function copy(elementId) {
    var textareaElement = $('#' + elementId);
    textareaElement.select();
    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } catch (err) {
        console.error('Oops, unable to copy');
    }
}

Einfügen

function paste(elementId) {
    $("#" + elementId).val(window.clipboardData.getData('Text'));
}

Der Aufruf der Funktionen, Ausschneiden, Kopieren und Einfügen

Hier nun ein Beispiel wie die oben genannten Funktionen aufgerufen werden:

<textarea id="inputTextarea"></textarea>
<button onclick="cut('inputTextarea');">Ausschneiden</button>
<button onclick="copy('inputTextarea');">Kopieren</button>
<button onclick="paste('inputTextarea');">Einfügen</button>

Beispiel auf jsfiddle

Ein lauffähiges Beispiel finden Sie hier auf jsfiddle.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kategorien

Tools

  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator
  • Widerstandsrechner
  • Rechner für Strom & Widerstände
  • ASCII Tabelle

Meta

  • Videothek
  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Kontakt
  • Cookie-Richtlinie (EU)

Links

Blogverzeichnis Bloggerei.de Blogverzeichnis TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com
©2023 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb