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:

  1. detect ctrl-v / shift-ins event using keypress event handler
  2. in handler, save current user selection, add textarea element off-screen (say @ left -1000px) document, turn designmode off , call focus() on textarea, moving caret , redirecting paste
  3. 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

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

IIS->Tomcat Redirect: multiple worker with default -