With help from https://stackoverflow.com/a/43438960
window.addEventListener('DOMContentLoaded', (event) => {
document.documentElement.addEventListener('paste', e => {
if (e.target.nodeName.toLowerCase() === 'input') {
e.preventDefault();
var text;
var clp = (e.originalEvent || e).clipboardData;
if (clp === undefined || clp === null) {
text = window.clipboardData.getData("text") || "";
if (text !== "") {
text = text.replace(/[\t\r\n\s]+/g, " ");
document.selection.createRange().pasteHTML(text);
}
} else {
text = clp.getData('text/plain') || " ";
if (text !== "") {
text = text.replace(/[\t\r\n\s]+/g, " ");
document.execCommand('insertText', false, text);
}
}
}
});
});
Note, the regex I'm calling out \t as well as \r\s and \s ... \s is any whitespace, and probably all you want/need adjust ast desired.
Crazy light on content for this one... I mean there's a lot of words and description, but the little example doesn't lead anyone down a path of being able to use the feature at all.
NOTE: You can *NOT* rely on this method to complete before the tab/window closes. It may or may not work depending on latency to the server, or the time it takes to fulfill the request etc.
Make other efforts using localstorage and a worker, if you want to avoid this failing to finish.
Decent example of leveraging event bubbling for form validation over specific input listeners. Would probably listen at the specific form level though, rather than the document level as a whole... but nice to see.