Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Will the onCopy event help me repair the bullet hole in my foot?

In a huge table of numbers, I made the user's experience "richer" by replacing all of the semi-visible minus signs by –. It looks great, big improvement. I was so busy admiring my cleverness that I forgot to notice the blood on the floor.

Because, come to find out, when the guy goes to select, copy, and then paste (elsewhere) such transformed minus signs, guess what? they're not minus signs any more.

Can I use the onCopy event dependably, straightforwardly, and cross-browserly (including Mac browsers) to change those – chars back to minus signs in the matter that was (or is about to be) copied?

If so, have you any hints on doing it?

EDIT: I'm using native JavaScript, not using any framework.

Thanks!

like image 569
Pete Wilson Avatar asked Jul 08 '11 00:07

Pete Wilson


2 Answers

I don't believe there's a way JavaScript can manipulate what is inside the clipboard because that's an OS feature. What you could do I believe is manipulate the text after the user pastes it into a field of your choosing. Here's an example with JQuery:

$('#my_text_field').bind('paste',function()
{
    $(this).val($(this).val().replace('–','-'));
}
like image 170
AlienWebguy Avatar answered Nov 10 '22 12:11

AlienWebguy


The – character will copy/paste correctly if inserted programmatically using javascript (and if you insert the actual character, instead of the HTML entity).

Perhaps you could replace every – that you have with something like:

<span class="fancyDash"></span>

And then on load you can run something like:

var longDash = '\u2013';
jQuery.each($(".fancyDash"), function() {
    this.innerHTML = longDash;
});

Here is a working example: http://jsfiddle.net/m9fhS/

Edit:

Or, if not using jQuery, you can first patch up document.getElementsByClassName so that it works correctly for anyone using IE, and then do:

var longDash = '\u2013';
var spans = document.getElementsByClassName("fancyDash");
for (var index = 0; index < spans.length; index++) {
    spans[index].innerHTML = longDash;
}

As shown here: http://jsfiddle.net/m9fhS/1/

like image 28
aroth Avatar answered Nov 10 '22 11:11

aroth