Question

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. What am I missing? How come IE cannot paste like Firefox??

EDIT

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.

Answer 1

An input with a type of text does not support new line characters. As such, IE strips them automatically, and you never have a chance to even parse them. Your best bet may be to use a textarea instead.

Alternatively, you could do something like the below, but it’s really just a workaround (note the onpaste event):

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

and for the javascript, something like:

function removespaces (which) {
    var str = which.value;
    str = str.replace(/\s|\n/g, ","); // replace space or newline by commas
    which.value = str;
}

function handlePaste (which) {  
    var str = window.clipboardData.getData("Text");    
    str = str.replace(/\s|\n/g, ","); // replace space or newline by commas
    which.value = str;
    return false; // kill the paste event so you don't get duplicate data.
}

jsfiddle example here: http://jsfiddle.net/fordlover49/mJ7L3/

On a related note (to try and help you avoid further problems), your passing in the element to the removespaces function, but hardcoding which element you’re setting, instead of using the element passed in.