JavaScript get clipboard data on paste event (Cross browser) -
how can web application detect paste event , retrieve data pasted?
i remove html content before text pasted rich text editor.
cleaning text after being pasted afterwards works, problem previous formatting lost. example, can write sentence in editor , make bold, when paste new text, formatting lost. want clean text pasted, , leave previous formatting untouched.
ideally, solution should work across modern browsers (e.g., msie, gecko, chrome, , safari).
note msie has clipboarddata.getdata()
, not find similar functionality other browsers.
the situation has changed since writing answer: firefox has added support in version 22, major browsers support accessing clipboard data in paste event. see nico burns's answer example.
in past not possible in cross-browser way. ideal able pasted content via paste
event, which possible in recent browsers not in older browsers (in particular, firefox < 22).
when need support older browsers, can quite involved , bit of hack work in firefox 2+, ie 5.5+ , webkit browsers such safari or chrome. recent versions of both tinymce , ckeditor use technique:
- detect ctrl-v / shift-ins event using keypress event handler
- in handler, save current user selection, add textarea element off-screen (say @ left -1000px) document, turn
designmode
off , callfocus()
on textarea, moving caret , redirecting paste - set brief timer (say 1 millisecond) in event handler call function stores textarea value, removes textarea document, turns
designmode
on, restores user selection , pastes text in.
note work keyboard paste events , not pastes context or edit menus. time paste event fires, it's late redirect caret textarea (in browsers, @ least).
in unlikely event need support firefox 2, note you'll need place textarea in parent document rather wysiwyg editor iframe's document in browser.
Comments
Post a Comment