All geek questions in one place

Capturing document-level overlay events without focused input or text field

<!DOCTYPE html> <html> <head> <title>Clipboard Paste Text</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> </head> <body> <input type="text" placeholder="paste in here" /> <script type="text/javascript"> /* <![CDATA[ */ $(document, 'input[type="text"]').on('paste', function(event) { var oEvent = event.originalEvent; oEvent.preventDefault(); var clipText = ''; if(window.clipboardData){ clipText = window.clipboardData.getData('Text'); }else if(typeof oEvent == 'object' && oEvent.clipboardData){ clipText = oEvent.clipboardData.getData('text/plain'); } // console.log('Pasted ' + clipText.length + ' characters.'); alert('Pasted ' + clipText.length + ' characters.'); }); /* ]]> */ </script> </body> </html>

^ I have this demo code. It binds the paste event to INPUT[TEXT] and DOCUMENT .

  • In Google Chrome (and Opera 15+), Ctrl+V entered without a carriage (external input and text area).
  • In IE and Firefox, Ctrl+V is not deleted outside the object into which the inserts are inserted (input and textarea).
    (but the binding of the Event document palette captures the paste event for all inputs and textareas .)

Is this the right behavior? Is my JS correct?

I would like to capture Ctrl + V without entering a text field in all three browsers. I am using text input now, but I would like to completely remove it and capture at the document level, and not at the input window level. Can this be done?

PS : I need to insert large amounts of text that cause the browser if they are inserted into the text box. I save it in a hidden field , capturing the paste event in the inputbox . My current solution is working correctly, but I'm still wondering if I am missing something, or FF, and IE only fires paste events at the input / textarea level.

PPS I already used the spellcheck=false and autocomplete=off trick to insert more text ... but it still hangs a bit, and since I don't need it editable, this is the best solution.

PPS My JS skills are pretty rusty (they are more like JS survival mode), and I don’t worry about browser compatibility, as those who will use this update are often and difficult.

Made by jsfiddle: http://jsfiddle.net/ninty9notout/A42UN/

+6
source share
1 answer

From http://www.w3.org/TR/clipboard-apis/ 5.1.3 insert event

The insert event has no default action in an uneditable context, but the event fires independently.

Chrome uses a lazy insert event, which means that it does not check if the focused element is an editable content area, so the document uses the paste event.

As for firefox and IE, it actually checks the element before allowing the paste event to fire. So basically you need an editing element for the content so that the insert event is used in all browsers.

I played using DIV-editable content as the main div on the page, and I think it seems to give the results you are looking for. Forgive me if the answer seems somewhat "hacky."

You can place the contenteditable div as a container div on the rest of your web page and not allow the user to type in the div, returning false when the user presses a key, unless it is an insert key.

Here is the fiddle if you want to see how I did it.

http://jsfiddle.net/NVqQ7/3/

HTML

 <div id="pageDiv" contenteditable><div>other content</div></div>

CSS

 html, body, #pageDiv { width: 100%; height: 100%; margin: 0; padding: 0; }

JavaScript:

 $(document).on('paste', function(event){ var oEvent = event.originalEvent; if (event.preventDefault()) event.preventDefault(); var clipText = ''; if(window.clipboardData){ clipText = window.clipboardData.getData('Text'); }else if(typeof oEvent == 'object' && oEvent.clipboardData){ clipText = oEvent.clipboardData.getData('text/plain'); } // console.log('Pasted ' + clipText.length + ' characters.'); alert('Pasted ' + clipText.length + ' characters.'); }); $('#pageDiv').keydown(function(e){ if (!event.ctrlKey) return false; });

A few notes:

  • The user must click on the text of the page to activate the insert event. that is, clicking on the browser alone may not be sufficient.

  • In firfox, you need to set contenteditable = "false" in the child divs, otherwise users can add text to these elements.

  • I needed to make the height and width of the div 100%. If your html and body are not 100% height and width, it will not work in IE.

  • I had to change the jquery library to a newer version for IE for the paste event to work in it.

Hope this helps

+3
source

Source: https://habr.com/ru/post/952455/

More articles:


All Articles