Bei "Klick" - Copy to Clipboard - HTML, Js?

Moin!

Ich suche nach einer Lösung für meine Webseite.

Gerne würde ich verschiedene Wörter oder Textausschnitte anbieten, die bei "Click" automatisch in die Zwischenablage des Nutzers wandern.

Gibt es dafür eine einfache Lösung, mit einem HTML-Schnippsel oder einem WP-PlugIn?

Vielen Dank im voraus!

Schönen Sonntag! :)

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

10.05.2020, 15:55

Lies hier: Interact with the clipboard.

WordPress Plugins:

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren

10.05.2020, 15:52

Beispielsweise:

function copyToClipboard(text){
      var area = docuemnt.createElement("textarea");
      area.value = text;
      document.body.appendChild(area);
      area.focus();
      area.select();
      var msg;
      try {
         var successful = document.execCommand('copy');
         msg = successful ? 'successful' : 'unsuccessful';
      } catch (err) {
         console.log('Oops, unable to copy');
      }
      document.body.removeChild(area);
      alert("Copying was "+msg);
}

Weiteres:

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

Antonio98

Fragesteller

10.05.2020, 15:56

Vielen Dank für die schnelle Antwort.

Könntest du den Code weiter erläutern? Ich habe leider kaum Erfahrung mit der Programmierung.
ich benutze Elementor für den Aufbau meiner Seite.

Destranix

10.05.2020, 15:57

@Antonio98

Ich empfehle, den verlinken beitrag durchzulesen(Erst im Edit hinzugefügt). Dort wird das wirklich sehr ausführlich erläutert und zudem weitere Maßnahmen angegeben.

MaxZzzz1

10.05.2020, 19:15

Mit

document.execCommand("copy")

document.execCommand("cut")

document.execCommand("paste")

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Schriftgröße und -farbe bei WooCommerce-Produktseiten ändern?

Hallo Zusammen,

ich möchte gerne die Schriftgröße und die Schriftfarbe der Titel und Untertitel bzw. Preise ändern:

https://kk24-sonderposten.de/produkt/at-p-co-herren-sakko-neu-groesse-50-1097/

Hat jemand eine Ahnung, wie ich dass z. B. per CSS anstelle?

Vielen Dank vorab!

...zur Frage

HTML, CSS, JS If-Statement wird erst nach Reload ausgeführt?

Hallo zusammen,

ich habe folgenden Code:

const radiomore = document.getElementById('qty-more');

const lower = document.getElementById('lower-section');

const more = document.getElementById('more-section');

if(radiomore.checked) {

lower.style.display = "none";

more.style.display = "initial";

} else {

lower.style.display = "initial";

more.style.display = "none";

}

Die Funktion wird allerdings erst ausgeführt, wenn ich die Seite manuell reloade.

Kennt jemand dafür eine Lösung?

Vorab Danke.

...zur Frage

Warum über JavaScript Events?

man kann ja in seinen html code onclick oder was auch immer für ein Event hinschreiben.

ich sehe trotzdem bei vielen Profis immer das hier

Html : 

<body>
<button id='MeinButton'>Senden</button>
</body>

js: 

document.querySelector('#MeinButton').addEventListener('click', MeineFunktion);

function MeineFunktion(){
event.preventDefault();
Alert(1);
}

einfacher wäre das hier

<body>
<button onclick='MeineFunktion();' id='MeinButton'>Senden</button>
</body>
function MeineFunktion(){
event.preventDefault();
Alert(1);
}

Und wieso muss man prevent default hinschreiben ?
Was genau macht der browser denn by default / standardmäßig das es sonst nicht funktioniert ?

...zur Frage

Wordpress: Buttons verkleinern u. Abstand vergrößern - aber wie?

Hallo,

bei meiner Wordpress-Seite (meinsakko.de) habe ich Paypal integriert. Jedoch sehen die Buttons unprofessionell aus.

Wie bekomme ich per CSS die Buttons kleiner und wie lässt sich der Abstand zum oberen "in den Warenkorb" vergrößern?

Danke vorab!

...zur Frage

Wordpress Cards mit bildern?

Bräuchte dringend hilfe bei einem Wordpress projekt unzwar wollte ich diese Elementor Cards nutzen die sich beim hovern seitlich drehen aber das problem ist das da nur icons gehen bzw. die bilder super winzig zu sehen sind.

Gibt es irgendeine alternative oder Plugin ?

Also auf der Vorderseite dann zum Beispiel für eine Fitness Studio Seite :

Headline EMS Training, Kraft Training oder Personal Training.

Auf der Rückseite irgendeine Description 3,4 sätze : "EMS training bietet viele vorteile ... impulse usw. Wenig Anstrengung viel erfolg".

"Personal training ist sehr gut ... mehr betreuung ..."

Sowas halt.

Keine verlinkung auf eine unterseite oder "Post Card".

Ich könnte es selbst machen mit html und css aber da ist das problem das es für laien nicht so gut bearbeitbar ist und auch mehr arbeit wäre.

Hab Elementor Pro Version falls das eine rolle spielt. Sowas mit Shortcode wär auch ok.

Hatte mir vorgestellt 8 leistungen

Jeweils 2x 4 rows und eine row soll unter "responsive" versteckbar oder mit meinem custom css da es auf mobil zu anstrengend wäre wenn es auf 1er column wechselt.

Wäre sehr nett wenn mir jemand dabei helfen könnte.

...zur Frage

Javascript verlinken funtioniert nicht?

Hallo,

Ich habe das seltsame Problem, dass ich eine Javascript Datei nicht verlinken kann. Bzw. dass der Inhalt auf der Javascript Datei nicht ausgeführt wird.

So habe ich die Datei im <head> Tag verlinkt:

Der Inhalt auf der Javascript Datei ist folgender:

"use strict"

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

Wenn ich den Javascript Code allerdings in der selben HTML Datei ausführe mit

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

</script>

funktioniert er.

Woran kann das liegen? Ich habe schließlich weitere Javascript Dateien verlinkt die alle funktionieren. Auch habe ich die JQuery Datei im <head> Tag verlinkt. Ich benutze den aktuellen Chrome Browser. Mit Firefox habe ich es auch schon probiert. Dort geht es auch nicht.

Als Editior verwende ich Visual-Studio-Code.

Ich bin gerade ziemlich verwirrt. Habe ich irgendwo einen Fehler gemacht?

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

Abstände auf Produktseite vergrößern - aber wie?

Hallo,

auf meiner Produktseite in meinem WooCommerce-Shop sind

1) die Preishinweise durcheinander (alter Preis/neuer Preis) nicht so erwünscht;

2) die beiden Buttons "In den Warenkorb" und der "Paypal Express" unschön angeordnet.

Wie lässt sich das mit css/php korrigieren?

Danke vorab.

...zur Frage

JS variablen in Html ausgeben, wobei die Javascript Datei eigenständig ist?

Wir bräuchten eine Lösung um unsere durch eine API generierten Daten auf unserer HTML Seite auszugeben.

Wir haben zum Beispiel ein let test = "Irgendwas" in der JS Datei und wir wollen den String in der HTML Datei ausgeben bzw auf der Website anzeigen lasse. Also es wird keine JQuery verwendet und die Daten liegen einfach als String vor.

...zur Frage

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zur Frage

JavaScript +/- Increment and Decrement Number in 5er Schritten?

Hallo zusammen,

ich habe folgenden +/- Increment and Decrement Select Button.

Bei +/- ändert sich der Wert immer 1. Dies möchte ich allerdings in 5er Schritten. Hat da jemand eine Lösung?

HTML:

</div>

CSS:

.wrapper{

height: 120px;

min-width: 380px;

display: flex;

align-items: center;

justify-content: center;

background: #FFF;

border-radius: 12px;

box-shadow: 0 5px 10px rgba(0,0,0,0.2);

}

.wrapper span{

width: 100%;

text-align: center;

font-size: 55px;

font-weight: 600;

cursor: pointer;

user-select: none;

}

.wrapper span.num{

font-size: 50px;

border-right: 2px solid rgba(0,0,0,0.2);

border-left: 2px solid rgba(0,0,0,0.2);

pointer-events: none;

}

JavaScript:

const plus = document.querySelector(".plus"),

minus = document.querySelector(".minus"),

num = document.querySelector(".num");

let a = 1;

plus.addEventListener("click", ()=>{

a++;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

});

minus.addEventListener("click", ()=>{

if(a > 1){

a--;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

}

});

...zur Frage

Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen