I have the following script which copies a cell data from a table (that cell is hidden - the JS grabs the data, show has to momentary show it); it works great, but only on the "bbcode2" ID and the "onclick="CopyToClipboard2" on any row only affects the very first row "bbcode2" ID record
I have no idea how to get the JS to grab the same cell on the same row as onclick button. I tried adding .closest(#bbcode2), but that still only grabs the first instance of bbcode2
I can replace the bbcode2 with a dynamic ID if I need to
<script type="text/javascript">
function CopyToClipboard2() {
document.getElementById("bbcode2").style.display = 'block';
document.getElementById("bbcode2").focus();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById("bbcode2"));
range.select().createTextRange();
document.execCommand("Copy");
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById("bbcode2"));
window.getSelection().addRange(range);
document.execCommand("Copy");
}
document.getElementById("bbcode2").style.display = 'none';
}
Edit -
I added a variable ID to each record, and I now have the following, but it requires I click on the cell for it to work. I want it to occur via a button on the same row in the table
Ideas?
addEventListener('click', function (ev) {
var serviceID = ev.target.id;
alert(serviceID);
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(serviceID));
range.select().createTextRange();
document.execCommand("Copy");
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById(serviceID));
window.getSelection().addRange(range);
document.execCommand("Copy");
}
document.getElementById(serviceID).style.display = 'none';
})
What I did was use rails to add an ID to the onclick
CopyToClipboard2(<%=f.id %>)
Then use that to tell the JS what ID to target
<script type="text/javascript">
function CopyToClipboard2(clicked_id) {
document.getElementById(clicked_id).style.display = 'block';
document.getElementById(clicked_id).focus();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(clicked_id));
range.select().createTextRange();
document.execCommand("Copy");
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById(clicked_id));
window.getSelection().addRange(range);
document.execCommand("Copy");
}
document.getElementById(clicked_id).style.display = 'none';
}
Works a treat :)
Related
Below java script code is working in normal html, while using below script in android, it is not working.
Code
function highlight(colour) {
var range, sel;
if (window.getSelection) {
// Non-IE case
sel = window.getSelection();
if (sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if ( !document.execCommand("HiliteColor", false, colour) ) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
} else if (document.selection && document.selection.createRange) {
// IE case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
Please someone suggest me how to highlight selected text in webview.
Just a first check: Have you enabled Javascript?
this.webView.getSettings().setJavaScriptEnabled(true);
I want to use a copy-to-clipboard function in HTML5, but without using flash. Is it possible? How?
I tried to implement a copy-to-clipboad function with JavaScript, but it is not working:
function Copytoclipboard() {
var body = document.body,
range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
document.execCommand('Copy');
} catch (e) {
range.selectNode(el);
sel.addRange(range);
document.execCommand('Copy');
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
}
}
You can use the HTML5 clipboard api http://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF
But do note that not all browsers fully support it as of now: http://caniuse.com/#feat=clipboard
UPDATE: This solution now works in the current version of all major browsers!
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})
<input id="txt" />
<button id="btn">Copy To Clipboard</button>
Note: Trying to use this solution to copy an empty string or a string that is only whitespace will not work.
ALTERNATE, SIMPLIFIED SOLUTION
This alternate solution has been tested in Chrome, Safari, and Firefox.
const txt = document.querySelector('#txt')
const btn = document.querySelector('#btn')
const copy = (text) => {
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
textarea.value = text
textarea.select()
document.execCommand('copy')
textarea.remove()
}
btn.addEventListener('click', (e) => {
copy(txt.value)
})
<input id="txt" />
<button id="btn">Copy</button>
Note: This solution will not copy an empty string, but it will copy whitespace.
It's not working because it requires a user interaction such as click. Otherwise, document.execCommand will not work. You also might wanna check clipboard.js, it's a super easy library to copy text to clipboard that doesn't require Flash.
Function for inserting text into the clipboard:
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
If you don't care that the contents of the text field will be selected prior to copy, here is two-line solution that works at least in Chrome 56 and Edge, but I bet it works in other browsers as well.
function clickListener() {
document.getElementById('password').select();
document.execCommand('copy');
}
document.getElementById('copy_btn').addEventListener('click', clickListener);
<input id=password value="test">
<button id=copy_btn>Copy</button>
https://jsfiddle.net/uwd0rm08/
You can Use Clipboard.js TO add Copy to clipboard. This work without flash take a look on Code Which I use:
//for copy to clickboard
var els = document.querySelectorAll('pre');
for (var i=0; i < els.length; i++) {
//for CLIPBOARD
var atr = els[i].innerHTML;
els[i].setAttribute("data-clipboard-text", atr);
//For SELECT
var ids = "elementID"+[i]
els[i].setAttribute("id", ids);
els[i].setAttribute("onclick","selectText(this.id)");
}
var btns = document.querySelectorAll('pre');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
//for select
function selectText(id){
var sel, range;
var el = document.getElementById(id); //get element id
if (window.getSelection && document.createRange) { //Browser compatibility
sel = window.getSelection();
if(sel.toString() == ''){ //no text selection
window.setTimeout(function(){
range = document.createRange(); //range object
range.selectNodeContents(el); //sets Range
sel.removeAllRanges(); //remove all ranges from selection
sel.addRange(range);//add Range to a Selection.
},1);
}
}else if (document.selection) { //older ie
sel = document.selection.createRange();
if(sel.text == ''){ //no text selection
range = document.body.createTextRange();//Creates TextRange object
range.moveToElementText(el);//sets Range
range.select(); //make selection.
}
}
}
<pre>I Have To Copy it<pre>
<script src="https://cdn.jsdelivr.net/npm/clipboard#2/dist/clipboard.min.js"></script>
To Know More About Its Usage visit Source :html5 copy to clipboard
I have a contenteditable div where I need to insert text at the caret position,
This can be easily done in IE by document.selection.createRange().text = "banana"
Is there a similar way of implementing this in Firefox/Chrome?
(I know a solution exists here , but it can't be used in contenteditable div, and looks clumsy)
Thank you!
The following function will insert text at the caret position and delete the existing selection. It works in all the mainstream desktop browsers:
function insertTextAtCaret(text) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(text) );
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
}
UPDATE
Based on comment, here's some code for saving and restoring the selection. Before displaying your context menu, you should store the return value of saveSelection in a variable and then pass that variable into restoreSelection to restore the selection after hiding the context menu and before inserting text.
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
Get a Selection Object with window.getSelection().
Use Selection.getRangeAt(0).insertNode() to add a textnode.
If necessary, move the cursor position behind the added text with Selection.modify(). (Not standardized, but this feature is supported in Firefox, Chrome and Safari)
function insertTextAtCursor(text)
{
let selection = window.getSelection();
let range = selection.getRangeAt(0);
range.deleteContents();
let node = document.createTextNode(text);
range.insertNode(node);
for(let position = 0; position != text.length; position++)
{
selection.modify("move", "right", "character");
};
}
UPD: since ~2020 solution is obsoleted (despite it can work yet)
// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')
I have used next code to insert icons in chat msg
<div class="chat-msg-text" id="chat_message_text" contenteditable="true"></div>
<script>
var lastCaretPos = 0;
var parentNode;
var range;
var selection;
$(function(){
$('#chat_message_text').focus();
$('#chat_message_text').on('keyup mouseup',function (e){
selection = window.getSelection();
range = selection.getRangeAt(0);
parentNode = range.commonAncestorContainer.parentNode;
});
})
function insertTextAtCursor(text) {
if($(parentNode).parents().is('#chat_message_text') || $(parentNode).is('#chat_message_text') )
{
var span = document.createElement('span');
span.innerHTML=text;
range.deleteContents();
range.insertNode(span);
//cursor at the last with this
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
else
{
msg_text = $("#chat_message_text").html()
$("#chat_message_text").html(text+msg_text).focus()
}
}
</script>
If you are working with rich editors (like DraftJs) but have no access to their APIs (e.g. modifying from an extension), these are the solutions I've found:
Dispatching a beforeinput event, this is the recommended way, and most editors support
target.dispatchEvent(new InputEvent("beforeinput", {
inputType: "insertText",
data: text,
bubbles: true,
cancelable: true
}))
Dispatching a paste event
const data = new DataTransfer();
data.setData(
'text/plain',
text
);
target.dispatchEvent(new ClipboardEvent("paste", {
dataType: "text/plain",
data: text,
bubbles: true,
clipboardData: data,
cancelable: true
}));
This last one uses 2 different methods:
Using data and dataType properties. This one works in Firefox
Using clipboardData property. Which works in Chrome but not in Firefox? https://github.com/facebook/draft-js/issues/616#issuecomment-426047799 . Though It's supposed to work in Firefox, maybe I don't know how to use it or there's a bug.
If you want to replace all existing text, you have to select it first
function selectTargetText(target) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(target);
selection.removeAllRanges();
selection.addRange(range);
}
selectTargetText(target)
// wait for selection before dispatching the `beforeinput` event
document.addEventListener("selectionchange",()=>{
target.dispatchEvent(new InputEvent("beforeinput", {
inputType: "insertText",
data: text,
bubbles: true,
cancelable: true
}))
},{once: true})
Pasting plain text can be handled with the following code.
const editorEle = document.getElementById('editor');
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
just an easier method with jquery:
copy the entire content of the div
var oldhtml=$('#elementID').html();
var tobejoined='<span>hii</span>';
//element with new html would be
$('#elementID').html(oldhtml+tobejoined);
simple!
I want to select text thats is on a Html page and make it BOLD, I am using the following Code
<script type="text/javascript" >
function getSelectedText(){
if(window.getSelection){ ;
return window.getSelection().toString();
}
else if(document.getSelection){;
return document.getSelection();
}
else if(document.selection){ ;
return document.selection.createRange().text;
}
}
$(document).ready(function(){
$("*").live("mouseup",
function() {
selection = getSelectedText();
alert(selection);
if(selection.length >= 3) {
$(this).html($(this).html().replace(selection, "<b>" + selection + "</b>") );
}
}
);
});
</script>
This Code works Fine But when the text is in two different paragraphs/ Div or if there is a link between the text then it doesnt seem to work.
How Could i Make it Work ?
If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.
The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.
UPDATE
Fixed to work in IE 9.
function makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
function highlightSelection(colour) {
var range;
if (window.getSelection) {
// IE9 and non-IE
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
document.onmouseup = function() {
highlightSelection("red");
};
Live example: http://jsfiddle.net/eBqBU/9/
a=document.getElementById('elementID').innerHTML;
variable 'a' will get the string value of anything inside the element with an id 'elementID'.
Is this ok?
Everything you need (based on your comments) can be found here: http://www.awesomehighlighter.com/webliter.js
I don't have time to extract the relevant parts but take a look for example in Webliter.prototype.highlight (just search for this in that file)
You can also use jQuery for example this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
I have a contenteditable div where I need to insert text at the caret position,
This can be easily done in IE by document.selection.createRange().text = "banana"
Is there a similar way of implementing this in Firefox/Chrome?
(I know a solution exists here , but it can't be used in contenteditable div, and looks clumsy)
Thank you!
The following function will insert text at the caret position and delete the existing selection. It works in all the mainstream desktop browsers:
function insertTextAtCaret(text) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(text) );
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
}
UPDATE
Based on comment, here's some code for saving and restoring the selection. Before displaying your context menu, you should store the return value of saveSelection in a variable and then pass that variable into restoreSelection to restore the selection after hiding the context menu and before inserting text.
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
Get a Selection Object with window.getSelection().
Use Selection.getRangeAt(0).insertNode() to add a textnode.
If necessary, move the cursor position behind the added text with Selection.modify(). (Not standardized, but this feature is supported in Firefox, Chrome and Safari)
function insertTextAtCursor(text)
{
let selection = window.getSelection();
let range = selection.getRangeAt(0);
range.deleteContents();
let node = document.createTextNode(text);
range.insertNode(node);
for(let position = 0; position != text.length; position++)
{
selection.modify("move", "right", "character");
};
}
UPD: since ~2020 solution is obsoleted (despite it can work yet)
// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')
I have used next code to insert icons in chat msg
<div class="chat-msg-text" id="chat_message_text" contenteditable="true"></div>
<script>
var lastCaretPos = 0;
var parentNode;
var range;
var selection;
$(function(){
$('#chat_message_text').focus();
$('#chat_message_text').on('keyup mouseup',function (e){
selection = window.getSelection();
range = selection.getRangeAt(0);
parentNode = range.commonAncestorContainer.parentNode;
});
})
function insertTextAtCursor(text) {
if($(parentNode).parents().is('#chat_message_text') || $(parentNode).is('#chat_message_text') )
{
var span = document.createElement('span');
span.innerHTML=text;
range.deleteContents();
range.insertNode(span);
//cursor at the last with this
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
else
{
msg_text = $("#chat_message_text").html()
$("#chat_message_text").html(text+msg_text).focus()
}
}
</script>
If you are working with rich editors (like DraftJs) but have no access to their APIs (e.g. modifying from an extension), these are the solutions I've found:
Dispatching a beforeinput event, this is the recommended way, and most editors support
target.dispatchEvent(new InputEvent("beforeinput", {
inputType: "insertText",
data: text,
bubbles: true,
cancelable: true
}))
Dispatching a paste event
const data = new DataTransfer();
data.setData(
'text/plain',
text
);
target.dispatchEvent(new ClipboardEvent("paste", {
dataType: "text/plain",
data: text,
bubbles: true,
clipboardData: data,
cancelable: true
}));
This last one uses 2 different methods:
Using data and dataType properties. This one works in Firefox
Using clipboardData property. Which works in Chrome but not in Firefox? https://github.com/facebook/draft-js/issues/616#issuecomment-426047799 . Though It's supposed to work in Firefox, maybe I don't know how to use it or there's a bug.
If you want to replace all existing text, you have to select it first
function selectTargetText(target) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(target);
selection.removeAllRanges();
selection.addRange(range);
}
selectTargetText(target)
// wait for selection before dispatching the `beforeinput` event
document.addEventListener("selectionchange",()=>{
target.dispatchEvent(new InputEvent("beforeinput", {
inputType: "insertText",
data: text,
bubbles: true,
cancelable: true
}))
},{once: true})
Pasting plain text can be handled with the following code.
const editorEle = document.getElementById('editor');
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
just an easier method with jquery:
copy the entire content of the div
var oldhtml=$('#elementID').html();
var tobejoined='<span>hii</span>';
//element with new html would be
$('#elementID').html(oldhtml+tobejoined);
simple!