Copy-Paste from MS Excel fails with IE but works with Firefox

[kristo5747]

I built a very simple app using a PHP form with a bit of Javascript.

In my form, I have a text input which I used to run a database search. In case I have multiple values, I have a bit of code that puts a comma in between each.

The weird part is this:

In Firefox, I can go do MS Excel, copy 5 values and paste them in the text input control. I can see all 5 values pasted and commas in between.

In Internet Explorer version 8, I can go do MS Excel, copy 5 values but only ONE value (the first number) gets pasted in the text input control.

This is my html

  <fieldset>
  <label for="DBRIDs">RIDs</label><input type="text" id="DBRIDs" name="DBRIDs" onchange = "removespaces(this)">
  </fieldset>

This is my Javascript in my page header

<script language="javascript" type="text/javascript">
  function removespaces(which) {
  str = which.value;
  str = str.replace (/\s|\n/g,","); // replace space or newline by commas
  document.myform.DBRIDs.value = str;
  }

Pretty basic stuff.

Tried changing textinput to textarea. No change. Am able to paste without problems from Firefox, Chrome, Safari and even Opera! IE is a no go.

What am I missing? How come IE cannot paste like Firefox?

[penders]

I don't think this has much to do with your code as I think its just how IE works, however...

I assume you are referring to copying 5 vertical cells from Excel? Copying 5 horizontal cells works OK for me in all browsers.

I only see a 'problem' with text INPUTs. TEXTAREAs work OK for me. (But you see the same problem with TEXTAREAs as well?) This can be expected IMHO. If you are trying to paste essentially multiline data into a text INPUT it is reasonable to expect there to be a problem. INPUTs cannot accommodate newlines. This seems to work in other browsers as they appear to remove the newlines before the data is pasted.

Tested IE8.

[penders]

There is a workaround... in the onpaste event you could intercept the pasting operation and in IE (since only IE supports the clipboardData object) remove the newlines and manually write it to the control, preventing the usual paste operation.

Just to add, regarding your regex, \s includes \n so don't need to include both and you probably want to replace sequences of white-space with a single comma rather than just one. As it stands at the moment two spaces would result in two commas. All you need is /\s+\g - however, this could still result in an unwanted comma at the start or end of the string (it needs trimming first). However, I think you would be better to do this in PHP, since you're going to have to do it in PHP anyway.

[kristo5747]

I had a typo so using textarea is working now. I can copy a column and paste it from IE

Of course (sarcasm), it is introducing a new problem:

It duplicates my commas and I am unclear it's because of textarea or my Javascript:

function removespaces (which) {
 var str = which.value;
 str = str.replace(/\s|\n/g, ","); // replace space or newline by commas
 which.value = str;
}
...
<textarea id="DBRIDs" name="DBRIDs" rows="1" cols="20" onchange="removespaces(this)" onpaste="handlePaste(this)"></textarea>

Any idea?

[penders]

As I mentioned above, you should use

/\s+/g

as your regular expression, this will get round your duplicate comma issue.

[kristo5747]

I figured out what's wrong.

1) my html was incorrect ; onpaste is not a recognized event of textarea so here is the correct version

<textarea id="DBRIDs" name="DBRIDs" rows="3" cols="20" onchange="removespaces(this)"></textarea>

2) but it introduced a new problem by giving me double commas ; I corrected my regex and use the slice method to remove the last comma

function removespaces (which) {
  var str = which.value;
  str = str.replace(/\s+/g, ",");
  var newStr = str.slice(0, -1)
  which.value = newStr;
}

I am in business. Thanks for your help.

[penders]

onpaste is not a recognized event of textarea so here is the correct version

onpaste is non-standard, but has reasonable browser support and should have worked. However, you only need the paste event if using the INPUT element, since the TEXTAREA does not have an issue with pasting multi-line text.

var newStr = str.slice(0, -1)

But this blindly chops off the last character whether it is a comma or not! It's easiest to use another regular expression to do this...

var newStr = str.replace(/(^,+)|(,+$)/g,'');