4

This is an age-old question, but I'm still having trouble with it. You see, I'm trying to paste some Excel data in a Text Area, but the silly browsers freeze for long periods of time when doing this, because of God-knows-what "smart" parsing they do. I can't get rid of that (file upload is out of the question, my boss wants me to paste rows from Excel in a Text Area).

The good news is that pasting in a standard textbox WORKS. But I can't force them to paste there. So I am trying to catch the paste event in the Text Area and then throw the text over to the textbox. Unfortunately, I stopped short at the pasting part. I can't paste the text via JS into the simple textbox.

So my question is: how do you paste a text, how do you invoke it via JS? There are some solutions which only work in IE, that's not good, of course ::- ).

Improve this question
2
  • The regular textbox is faster because it only holds one line (duh). Commented Jan 26, 2010 at 20:23
  • Duh of course. But it still pastes Excel data ok, separated by tab. Commented Jan 26, 2010 at 21:19

5 Answers 5

Reset to default
6

Simple.

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
            || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.getElementById('textinput').addEventListener('paste', function(e) {
    var text;
    
    if (isIe) {
        text = window.clipboardData.getData('Text')   
    } else {
        text = e.clipboardData.getData('text/plain');
    }
    
    // Do whatever you want with the text
    console.log(text);
    
    //If you don't want the text pasted in the textarea
    e.preventDefault();
});
<textarea id="textinput"></textarea>

If you want, you can even get rid of the textarea and do this more directly. I wrote a technical blog post explaining how we do copying and pasting at Lucidchart (where I work).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Sorry, didn't quite catch the idea. Can't you attach to thextarea's onpaste event (at least I know IE has such event) and then simply set textarea's value to the pasted value?

    pastedContent = window.clipboardData.getData("Text");
    document.getElementById("yourtextarea").value = pastedContent;

EDIT: ok, it seems like this only works in IE and newer versions of FF, but it's not a cross-browser solution.

Improve this answer

1 Comment

This is an IE-only solution ::- (
0

I can't paste the text via JS into the simple textbox

When you say “simple textbox”, do you mean <input type="text">? If so, then I think setting its value attribute to the text you’ve captured from the <textarea> should work.

Improve this answer

3 Comments

as far as I understand, the problem is catching the "paste" event in a cross-browser manner
I can catch the paste event, but not the pasted data. There are some commands like ExecCommand but they only work in IE.
Ah. How about: 1. Let the paste event complete in the <textarea>. 2. Read the value attribute of the textarea to get the pasted text. 3. Set the value of the <textarea> to an empty string. 4. Set the value of the normal text field to the text you got in step 2.
0

Enable javascript Copy to Clipboard in Firefox or Mozilla: http://www.febooti.com/support/website-help/website-javascript-copy-clipboard.html

Improve this answer

1 Comment

this is not a solution as you can't control users' FF settings remotely.
0

Try CodeMirror as alternate solution. Doesn't check it with copy&paste with huge/excel amount of data but maybe this help...

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.