homepage Welcome to WebmasterWorld Guest from 54.197.130.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:4410905
 12:33 am on Jan 26, 2012 (gmt 0)

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




msg:4410987
 9:13 am on Jan 26, 2012 (gmt 0)

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




msg:4411099
 3:38 pm on Jan 26, 2012 (gmt 0)

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




msg:4411266
 9:26 pm on Jan 26, 2012 (gmt 0)

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




msg:4411330
 11:49 pm on Jan 26, 2012 (gmt 0)

As I mentioned above, you should use
/\s+/g as your regular expression, this will get round your duplicate comma issue.
kristo5747




msg:4411339
 12:34 am on Jan 27, 2012 (gmt 0)

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




msg:4411421
 10:22 am on Jan 27, 2012 (gmt 0)

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,'');
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved