click to copy element's html code - javascript

So what i'm trying to do basically is to create my own Bootstrap Cheat Sheet that would allow me to automatically copy and element's html code to the clipboard when I click on it or on a certain button.
A little bit like this site is doing : https://hackerthemes.com/bootstrap-cheatsheet/
I know how to copy text but how to get access to the actual html code and copy it that i don't know how.
This is the code 'm using to copy text :
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
}
</script>
would really appreciate some help ^^

To get the text of the outerHtml copied, you need to take that and put it into a textbox so that you can select it, then copy it. It's a pretty hacky way to do this, but if you want to do it like hackerthemes, you can put the HTML into a disabled, selectable textbox that is styled nicely with CSS.
<html>
<head>
<script>
function myFunction() {
// get the OUTER html of the element you want to copy
var text = document.getElementById('myInput').outerHTML;
// put that outerHTML into another textbox for copying
var tempTextbox = document.getElementById('copyingText');
tempTextbox.value = text;
tempTextbox.focus();
tempTextbox.select();
document.execCommand("Copy");
}
</script>
</head>
<body>
<input type="text" id="copyingText" />
<input type="text" value="Copy Test" id="myInput" />
<button onclick="myFunction()">Copy text</button>
</body>
</html>

To access and change the words inside a div, or any element really, it is .innerHTML of an element.
function myFunction() {
var button = document.getElementById("Button");
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
button.innerHTML = "Copied!";
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()" id="Button">Copy text</button>
This is just a quick example to show that .innerHTML can change the text on the inside of the button. If you are more of a jQuery person (Which I am), you could use the function .appendTo(), which is just the same thing, but in jQuery. I wouldn't recommend that to you since there is already a built-in function for doing that in js.
Now to copy whatever the code is,
function myFunction() {
var text = document.getElementById("myInput");
var copyText = document.getElementById('myInput').outerHTML;
var textbox = document.getElementById('html');
textbox.value = copyText;
var button = document.getElementById("Button");
textbox.select();
document.execCommand("Copy");
alert("Copied the text: " + text.value + " HTML code!");
button.innerHTML = "Copied!";
}
#html {
visibility: hidden;
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()" id="Button">Copy text</button>
<input type="text" value="" id="html">
Now this second code takes the source code and copies that.

You can't Perform a Copy/Cut commands, on the document's elements.
document.execCommand("Copy"); only gets you an input value that you called select(); on, so i suggest you do the following :
function myFunction() {
var copyinput = document.createElement('input');
copyinput.value = document.getElementById("myInput").outerHTML;
copyinput.select();
document.execCommand("Copy");
alert("Copied the text: " + copyinput.value);
}
<input type="text" id="myInput">
<button onclick="myFunction()">Copy Code</button>

Use outerHTML to get the html as string.
function myFunction() {
//getting the html
var copyText = document.getElementById("myInput").outerHTML;
copyText.select();
document.execCommand("Copy");
//remove value
alert("Copied the text: " + copyText);
}

Related

How would I copy multiple hidden inputs values with multiple IDs with 1 or 2 JavaScript functions?

I am trying to refactor some of my code. Essentially I am using an button onClick event to invoke a function that copies a hidden input value by its element id. Since I have so many buttons(nearly 30) I am trying to condense all of these functions down to 1 or 2 instead of having a unique function for each unique ID. Any suggestions?
HTML
<input class="input" type="hidden" value="Test" id="accept1" size="1" on style="opacity:0">
<button onclick= "acceptFunction1()" > Test </button>
JavaScript
function acceptFunction1() {
var copyText = document.getElementById("accept1");
copyText.type = 'text';
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
copyText.type = 'hidden';
}
You can pass the name of the field(s) that you want to operate on. An example might be:
<input class="input" type="hidden" value="Test" id="accept1" size="1" on
style="opacity:0">
<button onclick= "acceptFunction('accept1')" > Test </button>
function acceptFunction(fldName) {
var copyText = document.getElementById(fldName);
copyText.type = 'text';
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
copyText.type = 'hidden';
}

javascript pass html input type id to function

Suppose I have a list of the following HTML elements with a Javascript event to copy the content of the HTML input type text into the clipboard:
<input type="text" size="70" value="something1" id="v1">
<button onclick="CopyToClipboard('v1')">Copy command</button>
<input type="text" size="70" value="something2" id="v2">
<button onclick="CopyToClipboard('v2')">Copy command</button>
etc..
How do I copy the txt using javascript?
I am trying to tweak the code below but I can't figure out how to pass the HTML id to the javascript code. I know the getElementById() is not correct in that context and shouldn't be called. But I don't know how to carry the id value across into the Javascript function.
<script>
function CopyToClipboard(myInput) {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select(myInput);
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
Any help would be greatly appreciated.
Thank you
The error is that you use document.getElementById("myInput") instead of document.getElementById(myInput).
function CopyToClipboard(myInput) {
/* Get the text field */
var copyText = document.getElementById(myInput) // pass dynamic value here
console.log(copyText)
/* Select the text field */
copyText.select(myInput);
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
<input type="text" size="70" value="something1" id="v1">
<button onclick="CopyToClipboard('v1')">Copy command</button>
<input type="text" size="70" value="something2" id="v2">
<button onclick="CopyToClipboard('v2')">Copy command</button>

when user click the ok button of windows alert box the meassage is copied to users clip board using jquery [duplicate]

This question already has answers here:
How do I copy to the clipboard in JavaScript?
(27 answers)
Closed 4 years ago.
I have copied the div element to the alert box. Now when I pressed ok button is it possible the text is copied to the user's clipboard.
Here is the code for reference:
$(document).ready(function(){
$("#bn").click(function(event){
$(alert($('#demo').text())
});
});
select(); to Select the text field and document.execCommand("copy"); to Copy the text inside the text field.
$(document).ready(function(){
$("#bn").click(function(event){
var valueToCopy = $('#demo').text();
$('#demo').append('<textarea id="temp"></textarea>');
$("#temp").val(valueToCopy);
$('#temp').select().text();
document.execCommand("Copy");
$("#temp").remove();
$(alert(valueToCopy));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo"> Hello java<br> Welcome to the world of programming<br> Error generated<br> Correction alert<br> </div> <div> <input type="button" value="clickToCopy" id="bn"> </div>
Yes it is possible.
In your html file include the below code.
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
In your js file include the below code.
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
For reference please visit the below link .
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
Hope this will resolve your issue .

is it possible to update html content in a page using Javascript?

I have a html page with textbox and button.
textbox
button
If I enter some text in textbox and on click on the button, it should update the HTML page like this:
text entered with h1 tag
textbox
button
Is this possible with Javascript?
Yes, it is possible. Tempted to leave it at that, but...
window.onload = function() {
var h1 = document.createElement("H1");
var txt = document.getElementById('mytext');
document.body.insertBefore(h1, txt);
document.getElementById('mybutton').addEventListener('click', function() {
h1.innerHTML = txt.value;
});
};
<input type="text" id="mytext" value="" />
<input type="button" id="mybutton" value="Send it" />
$('textarea').keyup(function () {
var mystring = $(this).val();
$('p').text(mystring);
});
Sure, with javascript.

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB

Categories