Get clipboard contents with Greasemonkey - javascript

Is there the possbility to get the textual content of the clipboard to paste it automatically into a textarea clicking a button? Just found a method to copy data to it, but not to read data from it.

No, you cannot do this in javascript because it has proven to be a huge security hole.
Likewise, the developers of Greasemonkey are unlikely to add this capability for the same reasons.
You can write a Firefox add-on that does this, but I've never seen a (legit) use case.
A technique that works well for me is to have the Greasemonkey script set focus to the textarea (or input) and then I merely press CtrlV. It's super convenient and actually faster than grabbing the mouse to click a button.

You can try to implement this using the clipboard interface.
Please check this out:
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#example
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#example

Related

<textarea>: ctrl + z breaks after changing the value content through javascript

I am making an HTML textarea that accepts tab key input using JavaScript.
When I searched for a solution on the web, I found this answer, but after some fiddling, I found out that ctrl+z stops working after I hit tab key.
Doing some more experiments revealed that changing the value attribute was likely the culprit of this problem. Here is a small scale code example that you can hopefully reproduce this behavior yourself.
https://codepen.io/MartianLord/pen/gORKPGp?editors=1010
I managed to find a workaround using document.execCommand to simulate the user input, but this method is deprecated as you can see here, so I am looking for a more up to date solution.
To support ctrl+z while using tab in <textarea>, you need to implement undo, redo functions to connect with <textarea>. When the <textarea> changes, record the changes in the history, and revert when ctrl+z key input occurs.
UndoRedojs is a library for this task.
I think there will be a lot of work to be done, such as setting the selection position, in order to fully implement it. I recommend using a text editor that has already been created.

Enable copy and paste for a site that doesn't allow it

First off, I want to say that I very little knowledge of coding so please bear with me. I'm trying to paste in a site that doesn't allow it. This is the link to the javascript that they used to block it, https://mychatdashboard.com/js/messages.js?v=1.3
A friend of mine is helping me with it and he suggested that I put this in the javascript console in the DevTools of Google Chrome,
handler = function(e){ e.stopImmediatePropagation(); return true; }
document.querySelector('#conversation-content .conversation-message-text').addEventListener('keyup', handler, true)
document.querySelector('#conversation-content .conversation-message-text').addEventListener('input', handler, true)
This does solve the problem but it creates another issue. It seems that it interferes with this section of the javascript that I have linked to,
* Function to update the messagebox. (Enable/disable send button,
* change the color class, update the counter)
* #return void
So what would happen is that when a message is typed in the textbook, there's a character counter at the top which shows how many characters are written. When 80 characters(I think it's 80) are typed, the send button will be enabled so that I can send the message. However, with the javascript code that my friend suggested that I used, it stops the counter from working altogether so the send button never gets highlighted.
Is there any way around this? Please let me know if further clarifications are needed since it's the first time I'm asking a question of this nature.
The JavaScript you're entering into the DevTools console is defining a function named handler and then adding it as an event handler for keyup and input events for a field on the page you're viewing (presumable the chat window textbox).
The way that the handler is defined and attached prevents other events from firing (such as those that enable the send button when you've typed enough characters).
For this sites (and I haven't been able to test it) instead of the code you've used you could try running this in the DevTools console (once the page is loaded):
restrictCopyPasteByKeyboard = function () { return true; };
This should redefine the function that's preventing you from using paste (I can't test it out because I can't access that site).
There are numerous way through one can copy contents from Right Click protected sites
By disabling browser JavaScript in browser
Using Proxy Sites
By Using the source code of the site
Disabling JavaScript in Browsers [Google Chrome]
In Chrome browser, you can quickly disable JavaScript by going to settings. See the screenshot for better explanation:
screenshot
Through Viewing Source Code
f you have to copy the specific text content and you can take care of HTML tags, you can use browser view source options. All the major browser give an option to source of the page, which you can access directly using the format below or by right click. Since, right click is out of question here, we will simply open chrome browser and type: view-source: before the post URl Like
view-source:Enable copy and paste for a site that doesn't allow it
Press ctrl+u
And find the paragraph or text you want to copy and then paste it into any text editor.
I'm sure there are many ways of restricting user's ability to copy/paste. In my experience, it's always been a JS function that you can overwrite.
Slight variations of the below have always worked for me:
document.getElementById("#ElementWithDisabledPaste").onpaste = null

How to obtain image from clipboard in a button click?

I'm trying to retrieve an image stored in the clipboard using jQuery. So far, I've managed to find a solution which works perfectly using the onpaste event. But, as per the requirements I want the same functionality in a "button click" instead of a "paste" event. I've tried to put the same code in a button click event, but with no luck. What am I missing here?
Here's my jsfiddle
If possible please tell me how I can do the same in IE(10 & above) & Mozilla Firefox.
Exapmle : Demo Applet
As mozdev states, this feature should be available in FF since version 22.
https://developer.mozilla.org/en-US/docs/Web/Events/paste
"Caniuse" states that too btw: http://caniuse.com/#feat=clipboard
Maybe you have to use a browser prefix or the event attributes have different names. Is your event not fired in other browser than chrome or is it fired but you don't receive data?
EDIT:
Additionally 'paste' is an event, you can't trigger it manually by a button. (Well you can but it doesn't make any difference.) This wouldn't make sense because you can't directly access the clipboard for security reasons and therefore you don't have the data available. in browser. With a button you have to use the file-select and upload method, which i think needs a webserver in the back to handle the request, so no pure js solution.

Javascript to simulate typing in contenteditable

I have a contenteditable div that I'd like to see the contents after a user types. This differs across different browsers for certain keys (like newlines and backspace).
For testing, I'd like to simulate this typing with javascript. Is there any way to do this?
I need more than just triggering events (which the majority of the questions on SO on javascript key triggering are about); I need the browser to see the 'enter' key was hit and do its thing to modify the contenteditable div. I'm interested in what the browser ultimately does so just listening for certain keystrokes and modifying the HTML myself would thus defeat the purpose.
This answer won't give you a way to do it via JavaScript, but I would recommend the browser automation testing tool, Selenium for this kind of testing. It will allow you to test the div as a user would interact with it.

Auto-copy to clipbord onfocus

I have a textarea that includes information. It has an onfocus attribute which selects all text inside it automatically (onfocus="this.select();). I want that when I focus on the textarea, all the selected text get's automatically copied to my clipboard, so I can easily paste it anywhere without having to right click to copy or pressing CTRL + C. How would this be done?
In general, a browser's JavaScript engine does not have access to any of the system's clipboard features for security reasons, so if you are asking for a portable, pure-JavaScript answer, then I'm afraid you can't do it.
(If you must, you can search around the site for "javascript" and "clipboard", I think there are some approaches using Flash. But best not to do it at all.)
For security reasons, JavaScript can't access the clipboard.
If you really want to do it, you must use flash (flash can write into the clipboard, but not read).
Yet, you need to click inside flash to write into clipboard (but it can be simulated).
You can see it being done in Pastebin (Copy to Clipboard).
If you really want to do it, I recommend you to use Zero Clipboard.
Notice that your actual approach is used by Google URL Shortener (try shorten a url).
Tell us your decision.
One of the APIs in the HTML5 family of APIs is about to solve your problem. It's called "Clipboard API and Events," and it will enable common clipboard activities (cut, copy, paste) for web apps via Javascript. Its currently (as of July 2011) a Working Draft. You can find the spec here:
http://www.w3.org/TR/clipboard-apis/
As for implementations, well, I couldn't find one just yet. Give it time...
or go to about:config and search this item on the list:
"clipboard.autocopy = false" change it true! :D

Categories

Resources