How do I handle the new line resulting from pasting from spreadsheet

JavaScript
21

But if I do this, then if it’s an intentional line break - is it not something I’m doing wrong here?

22

Right now, the reason you got 4 instead of three is here:

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>

</textarea>

You start the Textarea with a line break in it. So when i paste something onto it, i get 4 lines - the original linebreak, plus (+=) the lines i pasted.

If you remove that extra line break, the box starts empty, and when you paste into it, you get 3 lines.

Normally whitespace does not matter in HTML - but inside a <textarea> element, it does - the element’s contents, whitespace and all, is what is inside the box when your textarea is first displayed.

23

OK, got it. I didn’t realize that you were referring to this line break. Thanks for clarifying.

24

Hi @m_hutley ,

I am running into one interesting issue here. First of all, here is the JSFiddle without line break in the textarea.

If I am pasting the following 3 values by copying all three from the excel, it’s pasting fine as we discussed.

image

Here’s how it looks in the code after pasting:

image

where the cursor is after the HIJ123, which is what we want.

Now let’s say I introduce a new line after ABC123 as shown below:
image

And my cursor is on the line after ABC123 and then I try to past these 3 records again on that line, it is getting messed up as shown below:

image

Yellow highlighted are the ones which got pasted in some weird manner even though I had my cursor after the one ABC123. Any idea why this is happening or if there’s a way to fix this? Thanks again!

25

So right now, the code is set to just append the text to the box.
element.value +=

If you want it to insert at the cursor, you’d need to do some mathing with selectionStart and selectionEnd (a cursor in a box that isnt highlighting anything is one where selectionStart = selectionEnd), and then do some slice’ing of the string.

26

I didn’t quite understand it properly. Could you elaborate a little bit more? Thanks!

27

So you’ve got:

  • the thing being pasted: (event.clipboardData || window.clipboardData).getData("text").trim()
  • the current value of the textbox (element.value)
  • The element has an attribute, selectionStart, which defines the character number where the selection (highlighting) starts.
  • The element has an attribute, selectionEnd, which defines the character number where the selection (highlighting) ends.
    • if the cursor is in the box but is not highlighting anything, selectionStart and selectionEnd have the same value.
  • A string begins at index 0.
  • The slice(start,end) function gives you a piece of a string, from the character index (int) start to the character index (int) end.
    • If end is omitted, the rest of the string beginning at start is returned.

If you want to paste in place, you want to keep everything before the selection starts; then put your insertion, and then keep everything after the selection ends.

28

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.