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
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';
}
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>
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 .
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.
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