JSFiddle - React, Tailwind, and code Playground
by neonms92
HTML
<p>Click in this window and do a paste (ctrl-v or cmd-v). The pasted text will show up in the boxes below. I hope... the left box will be the HTML and the right box will be the TEXT.</p>
<input id="daInput" value="_">
CSS
#resultA, #resultB { float: left; margin-top:10px; border: 1px solid black; width: 200px; height: 200px; overflow-y: scroll}
#paste { position: absolute; top: -100000px; width: 10px; height: 10px;}
#status, #data { height: 12pt; font-size: 12pt; }
JavaScript
$(document).ready(function() {
// Fake paste
$('input').on('paste.me', function(e) {
alert('Gotta use Ctrl+V');
e.preventDefault();
}).on('keyup.me', function(e) {
if (($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
$('#paste').blur().remove();
}
}).on('keydown.me', function(e) {
if (($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
var self = $(this);
// got a paste
$('<div></div>').attr('contenteditable', '').attr('id', 'paste').appendTo('body').on('paste', function(e) {
setTimeout(function() {
var html = $('#paste').html();
var text = $('#paste').text();
var table = new Array();
var pastedRows = $('#paste').find('table').find('tr');
if (pastedRows && pastedRows.length > 0) {
for (var i = 0; i < pastedRows.length; i++) {
var pastedRow = $(pastedRows[i]);
var pastedCells = pastedRow.find('td');
var row = new Array();
if (pastedCells && pastedCells.length > 0) {
for (var j = 0; j < pastedCells.length; j++) {
var pastedCell = $(pastedCells[j]);
var cell = pastedCell.text();
row.push(cell);
}
table.push(row);
} else {
self.val(text).change();
}
}
}
else {
self.val(text).change();
...