Paste from clipboard

[mmcwhirter]

I am able to copy a textarea to the clipboard using:
Var copyText = getObj("TextArea1");
copyText.select();
document.execCommand("copy");

However, I am unable to get the paste from the clipboard to work. Ctrl-v works fine, but we'd rather use an clickable image for this. Can this be done?

Thanks,

Mike

[Scott Klement]

I've never done this before, but... I did a quick Google, and found that there's an execCommand("paste") that should work to paste things.

However, the examples I found on the Internet did not seem to work. (Even outside of Profound UI.) There was one exception that did work in Chrome, but didn't work in any other browser.

So from my quick attempts, it doesn't look like this is available in the web browser, or perhaps its available, but is inconsistent across browsers.

I did find some sites talking about how this isn't consistent, and that its difficult to get right due to security concerns. Remember, if you can write JavaScript code that reads the clipboard, so can any web site that you visit on the Internet. And, I think we can all see the security problems it'd cause if any web site on the Internet can browse/access whatever happens to be in your clipboard.

[DanD]

we'd rather use an clickable image for this.

May seem like a silly question - are you setting focus to the text area prior to document.execCommand("Paste"); ?

On the image button, onClick event, try this:

Code: Select all

setTimeout(function() {
   myTextArea.focus();
   document.execCommand('Paste');
},20);

(Note: I haven't tested this - essentially, replace myTextArea with the name of your text area)

What may have also have been happening was focus wasn't getting set because of timing - placing this in a setTimeout function should help assure that the code gets executed.

Hopefully this will help.

[Scott Klement]

Yes, I was setting focus before execCommand("paste").

I don't really understand your logic with regards to why it'd need to be on a timeout, but I tried your suggestion really quick, and it doesn't work for me, does the exact same thing that it did without the timeout... fails to paste anything.

[Megan]

I applogize for the intrusion but I had a quick question: Is there a reason the get(), pui.set(), and/or applyProperty() APIs are not a viable solution for this issue? It does not appear that this needs to use the user's clipboard at all, but is instead copying to the user's clipboard, for the user, to then paste it to the target element, again for the user. I am drawing this conclusion from the code provided by Michael, which I have pasted below and added comments.

Code: Select all

// Get text area object.
var copyText = getObj("TextArea1");

// Select *existing* content of text area.
copyText.select();

// Attempt copy to user's clipboard.
document.execCommand("copy");

Is this a test for another, more complicated project? If not, the following may workout better for you.

Code: Select all

// Get the Profound UI value of the retrieved widget.
var puiValue = get("TextArea1");

// -- or --

// Get the Value attribute value of the retrieved element object.
var curValue = getObj("TextArea2").value;

// -- then --

// Set the target widget value to copied value.
pui.set("targetWidgetId1", puiValue);
pui.set("targetWidgetId2", curValue);

If you would like to continue with the copy/paste approach, could you please elaborate on what you are trying to achieve? The only reason I can come up with for needing such a thing would be to get something the user copied from somewhere else, outside of the browser/app, or to send content to the user's clipboard for the user to be able to paste elsewhere. In both of these cases, the user should be, and browsers attempt to make them, the only one to do any pasting. If it is in their clipboard, they can do what they want with it. But, should you only be working within your program, with values already on the page, you should have no issue retrieving the values from the page using Profound UI APIs and currently fully supported JavaScript.

If you are trying to persist the data, it is possible to do so using bound fields of hidden textboxes and local storage. Browsers have storage space for web apps to use to persist user and session values, i.e. track current session, persist client-side settings or choices. To learn more about browser storage, you can check out here https://www.w3schools.com/html/html5_webstorage.asp, and search for additional sources using your search provider of choice.

The select() method can also be used with the pui.set() and applyProperty() APIs should get() or getObj().value not work for your situation. It is possible that they will not work as I have had an issue with getting the correct value of content the user pasted but has not otherwise interacted with the element, usually because the input element was autofocused on page load and the user use Ctrl + V instead of selecting Paste from the right click context menu. My guess for why that would be is because those key presses could potentially be simulated without user interaction, but I haven't researched this too deeply. If you would like to try simulating Ctrl + V to paste the clipboard content, I unfortunately do not have an example, and I also feel the get(), getObj().value, and select() methods would be easier better solutions if applicable for the situation.

I have demonstrated how the select() method can be used with pui.set() and applyProperty() can be used to "copy" and "paste", though, on a NodeRun workspace that you are welcome to checkout at the following links:

View in IDE: https://noderun.com/ide/megan_bond/copy-paste/
Run in Tab: https://noderun.com/run/megan_bond/copy-paste/

Should you go to checkout this example, clicking the little clipboard icons will "copy" the text from the text area in the same row and "paste" it to the element below it. The clipboards over the HTML Containers provide an example of using applyProperty() to "paste" the collected text. The clipboards over the output fields provide an example of using pui.set() to "paste" the collected text. The function I put together to do this is available in the scripts.js file located in the public/scripts/ folder of the workspace, but I have also pasted it below for convenience.

Code: Select all

// Function using select() method to get content of a passed element.
function getSelectedText(element) {
  // Creating temp storage for collected text.
  var text = "";
  // Get data type of the passed element.
  var type = typeof element;
  // If a string, assume the element ID was passed.
  if (type === 'string') {
    // Select element content.
    getObj(element).select();
  // If an object, assume the element Object was passed.
  } else if (type === 'object') {
    // Select element content.
    element.select();
  } else {
    return "Bad parameter value was passed to getSelectedText().";
  }
  // If something was selected.
  if (typeof window.getSelection != "undefined") {
    // Get the selection.
    text = window.getSelection().toString();
  // If the previous typeof was undefined,
  // assume the browser supports a different collection technique.
  // Then, if something was selected.
  } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    // Get the selection.
    text = document.selection.createRange().text;
  }
  // Return the collected text.
  return text;
}

Could you please review these suggestions to see if they will work for what you are trying to achieve?

I hope this helps!

[mmcwhirter]

Thanks all. I also tried document.execCommand('Paste') with no luck. Decided to just have the user use Ctrl-C and Ctrl-V if they would like to copy or paste.

Mike