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
Related
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.
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
I am debugging a complex web application and most of my experience is in OOP (such as Java) but not in JavaScript. The application makes heavy use of jQuery and has lots of javascript pop-up dialogs and the like.
I have some fields and also some fields on one of the pages. For some of them, data is not appearing correctly from the data source, in others, the raw data is there, but it needs to be formatted (i.e. phone number shows up as 1234567890 instead of (123) 456-7890 )
Unfortunately, the way this application works, these fields are not manipulated in code by the class or id name, so searching for either of these reveals nothing useful.
I have been learning how to use the JS debuggers in chrome, firefox, and ie. I was optimistic when I found options in some of these browsers to set a breakpoint whenever a DOM element is modified. Unfortunately, in the case of these tags, none of these breakpoints seem to fire when the text inside is modified. (I set all types of DOM breakpoints that Chrome and FF offered me, still no luck.)
What steps would a professional JavaScript programmer take in order to find out how the text in these fields is being modified? I would re-iterate, they are not being selected by use of the string literal ID or Class name.
You can try the Visual Event bookmarklet to find which events are registered on which elements, but you cannot programmatically find which portions of the code will change a given element.
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.
I've noticed that some sites (usually banks) suppress the ability to paste text into text fields. How is this done? I know that JavaScript can be used to swallow the keyboard shortcut for paste, but what about the right-click menu item?
Probably using the onpaste event, and either return false from it or use e.preventDefault() on the Event object.
Note that onpaste is non standard, don't rely on it for production sites, because it will not be there forever.
$(document).on("paste",function(e){
console.log("paste")
e.preventDefault()
return false;
})
Even if it is somewhat possible to intercept the paste event in many browsers (but not all as shown at the link on the previous answer), that is quite unreliable and posible not complete (depending on the browser / OS it may be possible to do the paste operation in different ways that may not be trappable by javascript code).
Here is a collection of notes regarding paste (and copy) in the context of rich text editors that may be applied also elsewhere.