HTML Variable anstatt fester String will nicht

S.Kara · 11. Dezember 2015

Ich möchte, wenn man auf einen Button klickt, einen bestimmten Text in die Zwischenablage kopieren.
So funktioniert das ganze mit einem festen Wert:

HTML:

<button data-clipboard-text="abc">x</button>

Ich würde das ganze aber gerne so haben, dass der Inhalt eines Textfeldes in die Zwichenablage kopiert wird.
Und das funktioniert so - leider nicht:

HTML:

<button data-clipboard-text='$document.getElementById("inval").value' >x</button>

Ich habe mit HTML eigentlich nichts am Hut, falls es etwas größeres ist was da angepasst werden muss, bitte möglichst einfache Worte benutzen, danke.

PS: PHP soll nicht verwendet werden, soweit ich weiß nur HTML5 oder JS.

Yuuri · 11. Dezember 2015

Code:

<button data-clipboard-text='javascript:$document.getElementById("inval").value' >x</button>

S.Kara · 11. Dezember 2015

Funktioniert leider auch nicht, danach sieht meine Zwischenablage so aus:

Code:

javascript:$document.getElementById("inval").value

fReAkgoesCB · 11. Dezember 2015

mehr Hintergrundinformationen wären hilfreich. Was spricht dagegen, den Wert direkt per JS an geeigneter Stelle auszulesen? Dein Ansatz wirkt nicht sehr sinnvoll

leadclown · 11. Dezember 2015

du hast doch da sicherlich noch mehr code oder? also eine funktion welche per click auf den button ausgeführt wird.

verarbeite den wert doch gleich mit dort. sollte man eigentlich immer machen um html und js sauber zu trennen.

ich empfehle da immer jquery, wenn du es nicht schon benutzt.

https://api.jquery.com/click/

S.Kara · 11. Dezember 2015

Hier mal der komplette Code:

HTML:

<!DOCTYPE HTML>
<html>
<head>
	<script src="clipboard.min.js"></script>
</head>

<body>
	<input type="text" id="inval" name="inval" value="test"></br>
	<button data-clipboard-text='javascript:$document.getElementById("inval").value' >x</button></br>
	<button data-clipboard-text="abc" >y</button>


    <script>
		var btns = document.querySelectorAll('button');
		var clipboard = new Clipboard(btns);
    </script>
</body>

</html>

clipboard.min.js

Yuuri · 11. Dezember 2015

Dann mach es auch richtig. Ein Beispiel gibts unten.

Code:

new Clipboard( "#inval + button", {
	text: function( trigger ) { return trigger.previousElementSibling.value; }
} );

So oder so ähnlich.

S.Kara · 11. Dezember 2015

Habe es jetzt so hinbekommen:

HTML:

<!DOCTYPE HTML>
<html>
<head>
	<script src="clipboard.min.js"></script>
</head>

<body>
	<input type="text" id="inval" name="inval" value="test"></br>
	<button class="btn" data-clipboard-action="copy" data-clipboard-target="#inval">x</button>

	<script>
		new Clipboard('.btn');
	</script>
</body>

</html>

Suche

HTML Variable anstatt fester String will nicht

S.Kara

Captain

Yuuri

Fleet Admiral

S.Kara

Captain

fReAkgoesCB

Lt. Junior Grade

leadclown

Captain

S.Kara

Captain

Yuuri

Fleet Admiral

S.Kara

Captain

Ähnliche Themen