Javascript - insert copied text without containing box - javascript

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.

Related

Copy text from ONE of SEVERAL inputs with a SINGLE function (by ID)

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.

Copy to clipboard via icon

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);
}

Using javascript to select text and the containing element using createRange

I'm rolling my own generic wysiwyg editor but Im stuck selecting some text. I'm using a div with contenteditable set to true to enter the text into. The problem is I'm using a <var> tag to highlight some text that the user is supposed to delete and rewrite in their own words. When the text inside the <var> tag is clicked it highlights it as I expect but when you hit backspace it only deletes the text and not the tags (<var>). How can I tell the selection to grab a few more characters on each end of the selection so it also deletes the <var> tags? I'm using the following to make the selection happen.
var range = document.createRange();
range.selectNodeContents(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Placed function on the div's click event.
Selected the <var> tag.
Used .selectNode rather than .selectNodeContents.
Browsers handle it differently though. Some will add <i></i> tags when you enter more text, others don't, but this does remove the <var> tag completely....
var myDiv = document.getElementById("myDiv");
var elem = document.getElementById("myVar");
myDiv.addEventListener("click", function() {
var range = document.createRange();
range.selectNode(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
<div contenteditable="true" id="myDiv">
Hello, this<var id="myVar"> is a test</var> of the editor
</div>

open website with drop into textbox HTML

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

Using keyup function without changing editing text

I am using javascript function keyup with editable div and text input filed use for add text into editable div so my code work fine but recently i am add CKeditor plugin for editing text.
for example if i set text in input field keyup function work and these text set into editable div now i want to use Ckeditor for customizing after customization if i want to change text with input field than editing lost and return on default style.
Javasacript
$('#input1').keyup(function () {
txt = $('#input1').val();
$('#field1').text(txt);
});
HTML
<input type="text" id="input1">
<div id="field1" contentEditable='true'; ></div>
Try using the following:
$(document).on("keydown", "#input1", function() {
txt = $('#input1').val();
$('#field1').text(txt);
});
Online example
EDIT 1:
If you want to make sure that the initial input is also updated upon change of div, you should try the following:
$(document).on("DOMSubtreeModified", "#field1", function() {
$('#input1').val($('#field1').text());
});
Try clicking on the button or modifying div's content via Firebug, for example and see how input is also changed.
I wouldn't use keyup in your case but changed it as such upon your request.
Online example

Categories