Can you make a textarea which doesn't automatically edit your text?

Question

I'm writing a script that takes text from a file and adds/edits a checksum at the end (using a text editor like notepad++ to go to/from hard drive).

The browser textarea translates both \n and \r\n to \n when you copy/paste into it, and then converts to either \n or \r\n when going to another program (depending on which operating system you are in). This makes the checksum incorrect (even if you ignore the mangling of any non-printable characters in the checksum itself).

I guess I might be able to bypass this with the open/save file dialog (as long as there are not any similar surprises here), but there are other projects this would also be useful for.

Answer 1

You could try using a <pre> element with the contenteditable="true" attribute instead of a textarea. This should theoretically preserve the input.

---

Edit I

You could intercept the onpaste event and normalise all instances of \r\n to \n and then generate the checksum. The JavaScript might look like this:

var input_el = document.querySelector('.your-textarea');

input_el.onpaste = function(e){
  typeof e !== 'undefined' && e.preventDefault();      

  var clipbd_data;
  
  // handle IE edge case
  if (window.clipboardData && window.clipboardData.getData) {
    clipbd_data = window.clipboardData.getData('Text').replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");
  }
  else if (e.clipboardData && e.clipboardData.getData) {
    clipbd_data = e.clipboardData.getData('text/plain').replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");
  }
  else {
    return; // functionality not supported
  }

  input_el.value = clipbd_data;

  return false;

};

Note: I have not tested this.

Source for regex

---

Edit II

Intercepting the copy event

First, add the following onclick handler to the textarea:

<textarea class="your-textarea" onfocus="this.select()" onclick="this.focus();this.select()">
</textarea>
<!-- could optionally add ontouchstart="this.select()" for phones, if you need to -->

This is important, because we're intercepting the copy event — it's not as though we can grab the exact data the user copied, because they haven't copied it yet, so we need to force the user to select all the text in the textarea automatically so we can pass the whole contents of the textarea to the clipboard (after normalisation). This should be what the user wants to do anyway, so it shouldn't present a usability problem...

Now, to intercept copy and add your own text:

var txt_area = document.querySelector('.your-textarea');

txt_area.addEventListener('copy', function(e){
  // stop the normal copy behaviour
  typeof e !== 'undefined' && e.preventDefault();
  
  // get the contents of the textarea
  var txt_before = txt_area.value;
  
  // normalise
  var txt_after = txt_before.replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");

  e.clipboardData.setData('text/plain', txt_after);
});

Answer 2

It looks like this may be impossible, so I am posting another question on using a different approach to getting data from javascript to a file without it being corrupted. See "Keep javascript blob from editing data when saving file"