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.
Related
I have a webapp which will be viewed using certain popular browsers and I am required to support the handling of certain keypress events. Our users will be using Windows and the keypress events always use the Alt key as a modifier.
There is no specific requirement for keyUp/keyDown event handling, the user just has to feel like something happens when he/she presses, for example, Alt-F.
How do we accomplish this in the Firefox browser, which we are required to support?
The problem:
All of our implementation attempts are interfered-with by the fact that when the FireFox menu bar is visible (File, Edit...), pressing an Alt key combination which is already claimed by the menu bar (example: Alt-f) will cause the appropriate menu to expand. We don't want this to happen. I have been shown examples of web apps (using tens of thousands of lines of javascript....) that do NOT experience this issue, so I know it is possible, but I don't know how this was done in the example I've seen with my own eyes.
I can find dozens of examples on the web of how to write an alt-key handler in JS, but I haven't found a single article on this issue or a single code example that works under the circumstances I've described. We are using Spring-MVC and a recent version of jQuery, if that matters.
I'm happy to update the question with any other information that proves relevant.
Side note about work-around suggestions:
The requestor has specifically demanded that I use the Alt key as the modifier, on the grounds that they use other webapps in FireFox where both the menu-bar is visible AND alt key combinations work. (Example: Alt-s). So, feel free to post well-intentioned work-arounds in the comment section if you wish - I promise that my own personal curiosity will drive me to read them all - but also keep in mind this is not the subject of my question.
Be aware that some browsers will not allow you to capture certain shortcuts! A working example in native Javascript for the Alt+s shortcut in Mozilla Firefox (version: 51.0.1, Linux):
window.onkeydown = function(e){
if(e.altKey && e.keyCode == 83){
e.preventDefault();
alert("Shotcut Pressed")
}
}
Hotkeys have been done well by various projects, such as jquery.hotkeys. You can see a working example on their demo page for most hotkeys. It's very small, only about 200 lines.
Here is a small example with the Alt+S hotkey that works for me (without triggering the history menu) in Firefox 40.0.2 (when the page is in focus of course, not the codepen editor).
$(document).bind('keydown', 'Alt+s', function() {
$('body').append('Alt+s was pressed; ');
// alert('alert will cause the menu to activate, do not use');
return false;
});
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 a beginner in Javascript & HTML5
Suppose I have a contenteditable <div> [block-level] element in my HTML5 window.
What is the exhaustive list of JavaScript events which the user could trigger by modifying this element (or some sub-elements) through user interaction?
How should I code in JavaScript to reject some user action? or change the DOM... (i.e. replace some TextNode with e.g. some <span>)
It seems that the input event cannot "undo" or "reject" some user action...
FWIW, at this point I only care about recent Firefox browsers (mine is 21 beta 7 on Linux).
This is an answer to a related question.
In other words, I don't have a clear picture of how to design rich text editors in HTML5 & JavaScript.
PS I want plain JavaScript, not interested in any library above it yet.
Addenda
Maybe mutation observers could be relevant?
Follow-up question here...
The exhaustive list of events on contenteditable elements is the same as for input type=text. See this list of all events (look especially at Form Events): http://www.w3schools.com/tags/ref_eventattributes.asp
"How should I code in Javascript to reject some user action?"... just put "event.preventDefault()" at the beginning of an event listener for the event of that action. Example to reject keypresses:
contenteditableElement.addEventListener('keypress', function (e) {
e.preventDefault();
// do something else, maybe...
});
To undo a user's action:
document.execCommand('undo', false, '');
As to designing rich text editors, there are many good demos available. I recommend:
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
http://www.quirksmode.org/dom/execCommand/
Make sure to view source of the last link; especially the buttons.js file. Also check out the amazing commands list on the MDN article. Good luck -- but try not to re-invent the wheel. There are many well-tested editors out there; check out this list: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
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 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