With JS or Jquery - Is it possible to have a read only field that displays with a mask, but unmasked value when copied?

Question

I have a code generator form that has 2 text boxes. The first takes a 12 digit code, then when a button is pressed, runs that code through an algorithm and spits out a 12 digit key. I would like (for both fields actually) for the data to be input with a mask, but if selected and copied, to be a string of numbers.

For example:

The user types into the text box: 123456789012 The mask displays the input in the box as: 1234-5678-9012 The user presses a generate button The text in the second text box (read only) displays a return code as: 5798-1521-4886 When the user copies that second text box and pastes it into notepad the value is: 579815214886

Is this possible? I poked around a number of JQuery mask plugins but they all copy/pasted with the mask data still in the string. The only other thing I can think of is that when a field gets focus to remove the mask, but when it loses focus to apply the mask. Is there a better way?

Thank you for your help.

Answer 1

I solved it by removing the mask when the form is submitted. Also removing the mask when focus is gained, and applying the mask when focus is lost.

Answer 2

Actually I have just access to an IE browser.

First a simple input field:

<input type="text" id="field" />

Second, binding a copy event (use on in later versions of jQuery in place of bind):

$(function() {
    $("#field").bind("copy", function (e) { window.clipboardData.setData("Text", "MyCustomText"); });
});

When you copy the text inside the input, "MyCustomText" will be placed into the clipboard data. You can replace this with the value that you want for the field without the mask.