I'm using w3schools' script for copying text to clipboard when clicked, but the script only works when a textfield is present. I'm trying to have just an icon show with no textfield, so when a user clicks the icon, the coded text is automatically copied to the clipboard.
Their script is located here: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
I'm using display:none; to hide the input field. Despite everything appearing to work as far as the JS is concerned, it just doesn't copy the text.
Is there a way, maybe via another method or script, that will allow me to just show an icon for copying text rather than a field + icon/link?
There is a way to copy hidden inputs, but not using display:none, you could send the input to a location out of view, using something like position:absolute;left:-1000px, example:
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
#myInput{position:absolute;left:-1000px}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
Here:
var copyTextareaBtn = document.querySelector('.btn4');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.block2');
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
Well I dont know if I understood your question, but I assumed you want to copy some text without displaying the text in your html page, with that script you are just getting the element from the id of the text imput whenever the buttom is pressed.
If you hide it you wouldnt be able to acces it. If you just want to copy some hiden text whenever you press the bottom, you should put your text in your javascript file and not into your htlm page :)
I hope my answer helped you!
function copyToClipboard(text){
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
Related
everyone. Working on this HTML document.
I have a function (triggered by a button) that selects and copies the text from an input. Said function works based on the input's ID.
I want to add several inputs and fix the function to get the text of ONE specific input, but so far, I have only been able to make it work by stating the specific ID of ONE input.
Obviously, I don't want to implement a function for every input I will use.
This is my current code:
<input type="text" value="AWESOME TEXT" id="1">
<button id="1" onclick="myFunction()"> Copy</button>
And here is the script
<script>
function myFunction() {
var copyText = document.getElementById("1");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
The function finds the input with the ID "1" and copies the text.
Because I have to sate the "1", it only works with that specific input.
I have tried with:
var copyText = document.getElementById(this.id);
and with:
var copyText = document.innerHTML);
but to no avail.
So far, my only option is to wirte a function for every input, but not only will this be burdensome and unpractical. It will also bloat my code.
Thanks in advance.
If you send the id as a parameter it will work properly. You can do it like this:
function myFunction(myId) {
var copyText = document.getElementById(myId);
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
<input type="text" value="AWESOME TEXT" id="1">
<button id="1" onclick="myFunction(this.id)"> Copy</button>
It worked like a charm.
I hadn't noticed that the button ID must also match the input id.
Thanks a lot.
That was really fast and more than helpful, Pietro Nadalini.
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
This function works well to use buttons to add strings to a textarea in order to create a complex paragraph.
However, if the user adds/deletes/modifies that text with the keyboard, the function will no longer work until the form is refreshed, which loses the text changes.
Is there a way to modify the function to allow resuming use of the function after any keyboard edits without losing the text that has been added and modified?
Basically a non-jQuery duplicate of Why is my text not being added to the textarea after the second change event? .
innerHTML sets the default value of the textarea. Once the textarea was edited by the user, the current value is stored in the value property.
Use
elem.value += text;
instead.
I am using kendo editor in my application to capture some information. One of the requirements is to save the text entered in the same without any markup. I understand that the piece of code:
$("#editor").data("kendoEditor").value();
will give me the text entered in the control with the markup. But is there any way to retrieve only the text entered? I even wanted the number of lines in the text area that the content occupies.
You can use
var text = $("<div/>").html($("#editor").data("kendoEditor").value()).text();
Try the following code :
try {
var value = $("#editor").data("kendoEditor").value();
var text = value.replace(/(<([^>]+)>)/ig,"");
alert(text);
}
catch (e) { }
I'm currently learning Javascript and face the following problem. I want to copy the text of a readonly html textarea and use the following code:
function copy_text ()
{
var text = document.getElementById("textbox");
var range = document.createRange();
range.selectNode(text);
window.getSelection().addRange(range);
document.execCommand("copy");
}
Actually it works, but there is a little quirk. If I insert the copied text to another input field, for example like the input line of a webbrowser, then the text appears perfectly fine as text. However, if I paste the text into Microsoft Word, the text appears in a box with two slides, one at the bottom and one at the left side. What is going on here?
You're selecting the entire node, which is a textarea, so that's what gets copied to the clipboard. Word is then pasting a textarea into the document.
If you just want the text of the textarea, just use its select method:
function copy_text() {
var text = document.getElementById("textbox");
text.select();
document.execCommand("copy");
}
document.getElementById("btn").addEventListener("click", copy_text, false);
<textarea id="textbox" readonly>Some example text</textarea>
<br><input type="button" id="btn" value="Copy">
select selects the contents of the textarea, not the textarea itself.
I have made A user-script ( DOM Javascript) which included a text-box. I want the text-box to open up a google search of the input when an item is dropped. For example, if I select the word "Javascript" and drag it into the text-box, it will open up a Google search of "Javascript".
This is the code I have:
//only Javascript
var input2=document.createElement("input");
input2.type="text";
input2.id="Word_search";
input2.addEventListener("drop", GoogleWord);
document.body.appendChild(input2);
function GoogleWord(){
console.log("hi");
var text = document.getElementById("Word_search").value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
(I could not use a snippet because It does not seem to work inside the snippet)
The Main problem is that the function runs before the text is inserted into the textbox, and therefore, will do a blank Google search.
So, I only need the text to be inside the text-box when the function runs.
The drop event apparently occurs before the input is updated with the dropped text. The way to get the dropped text is with event.dataTransfer.getData(mimetype).
function GoogleWord(event){
console.log("hi");
var text = event.dataTransfer.getData('text/plain');
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
FIDDLE
Try this,
function GoogleWord(e){
console.log("hi");
var text = e.target.value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}