Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Wednesday, March 30, 2016

Catch paste input

Catch paste input


I'm looking for a way to sanitize input that I paste into the browser, is this possible to do with jQuery?

I've managed to come up with this so far:

$(this).live(pasteEventName, function(e) {   // this is where i would like to sanitize my input   return false;  }  

Unfortunately my development has come to a screeching hold because of this "minor" issue. I would really make me a happy camper if someone could point me to the right direction.

Answer by moff for Catch paste input


Hmm... I think you can use e.clipboardData to catch the data being pasted. If it doesn't pan out, have a look here.

$(this).live("paste", function(e) {      alert(e.clipboardData); // [object Clipboard]  });  

Answer by Ilya Birman for Catch paste input


See this example: http://www.p2e.dk/diverse/detectPaste.htm

It essentialy tracks every change with oninput event and then checks if it?s a paste by string comparison. Oh, and in IE there?s an onpaste event. So:

$ (something).bind ("input paste", function (e) {      // check for paste as in example above and      // do something  })  

Answer by Mister Lucky for Catch paste input


This is getting closer to what you might want.

function sanitize(s) {    return s.replace(/\bfoo\b/g, "~");   };    $(function() {   $(":text, textarea").bind("input paste", function(e) {     try {       clipboardData.setData("text",         sanitize(clipboardData.getData("text"))       );     } catch (e) {       $(this).val( sanitize( $(this).val() ) );     }   });  });  

Please note that when clipboardData object is not found (on browsers other then IE) you are currently getting the element's full value + the clipboard'ed value.

You can probably do some extra steps to dif the two values, before an input & after the input, if you really are only after what data was truly pasted into the element.

Answer by Christoffer Winterkvist for Catch paste input


I sort of fixed it by using the following code:

$("#editor").live('input paste',function(e){      if(e.target.id == 'editor') {      	$('