I have the following JSFiddle code , where user can paste some things from an excel spreadsheet on the textarea. I’ve noticed whenever I’m copying and pasting stuff from an excel spreadsheet on the text area, the cursor is on the next line where I’be highlighted yellow below:
Because of that, the split counts it as an additional empty value. How can I validate or make sure that the cursor stops after HIJ123 and not on the new line so that I have to deal with 3 arrays only?
There may be a scenario where user would like to add an empty line after HIJ123 or before ABC123 or somewhere between ABC123 and DEF123 etc and at that point I’m okay having an empty character value in the array but not when user has just pasted 3 values.
To test from the JSFiddle shared above, you can paste the commented part from the JS code on the text area. However, after pasting in JSFiddle, cursor is not showing on the new line but with a copy paste from spreadsheet there is a possibility that, it happens frequently.
1 Like
How do you know the difference between
and
?
What’s in the user’s clipboard apparently contains a trailing \r\n. Was it intentional or not?
So when I’m selecting those three values from the spreadsheet and pasting it , it is aways coming out to be be like this:
ABC123
DEF123
HIJ123
|
Consider | as the blinking cursor for discussion purposes. So this is not intentional and I would like the cursor to be like this when it’s pasted:
ABC123
DEF123
HIJ123|
However, if user tries to press enter button to add new line after HIJ123 (once everything is pasted from the spreadsheet), then that’s intentional. Similarly, if user tries to add a new line after ABC123, that will be considered instentional as well.
So if the user selects 4 rows in the spreadsheet, and the last row is blank, that’s not intentional and you should get rid of it.
Okay.
element.addEventListener('paste',(e) => {
e.preventDefault();
element.value += (event.clipboardData || window.clipboardData).getData("text").trimEnd()
}
Yes, so if user selects three rows a shown in this online excel work book using shift and enter like this:
https://products.aspose.app/cells/editor/edit?FolderName=73d75500-dc6c-4a0a-a6a2-5b562058c89e&FileName=book1.xlsx&Uid=e7f54e3d-cd96-4c5f-8454-fdc712a07815.xlsx
And then Ctrl + C to copy and then paste it to text area, it’s going to behave as I explained in my earlier post.
Could you help me understand, how would your code :
element.addEventListener('paste',(e) => {
e.preventDefault();
element.value += (event.clipboardData || window.clipboardData).getData("text").trimEnd()
} );
look like inside mine?
document.getElementById('post-button').addEventListener('click', function () {
var lines = $('#post-text').val().split('\n');//gives all lines
//To paste
/*
ABC123
DEF123
HIJ123
*/
console.log(lines);
console.log(lines.length);
var firstLine=lines[0];
console.log(firstLine);
var secondLine=lines[1];
console.log(secondLine);
for(i=0 ; i < lines.length; i++){
$("#phrase").append("<div>"+lines[i]+"</div>")
}
});
Thanks!
Well it wouldnt go inside that, it would go outside it, along with:
let element = document.getElementById("post-text")
1 Like
Okay, so something like this. Makes sense. Thanks!
let element = document.getElementById("post-text");
element.addEventListener('paste',(e) => {
e.preventDefault();
element.value += (event.clipboardData || window.clipboardData).getData("text").trimEnd()
} );
document.getElementById('post-button').addEventListener('click', function () {
var lines = $('#post-text').val().split('\n');//gives all lines
//To paste
/*
ABC123
DEF123
HIJ123
*/
console.log(lines);
console.log(lines.length);
var firstLine=lines[0];
console.log(firstLine);
var secondLine=lines[1];
console.log(secondLine);
for(i=0 ; i < lines.length; i++){
$("#phrase").append("<div>"+lines[i]+"</div>")
}
});
Would it be a good idea to trimStart as well if pasting is resulting in some space at the start? In that case I guess I could define another one like this:
element.addEventListener('paste',(e) => {
e.preventDefault();
element.value += (event.clipboardData || window.clipboardData).getData("text").trimStart()
} );
If you want to do that, you can just replace .trimEnd() with .trim() - you’ve already got an event manipulating the string, just have it manipulate it a bit more.
1 Like
Makes sense. That will take care of leading and trailing spaces.
Hey @m_hutley ,
I was testing the trim() thing and when I pasted the content as shown in the image below:
Why is it still showing it as length 4 with one empty character? Here’s the fiddle I’m playing with.
The code trims what you’re pasting, not what is in the box. You’ve got a blank line in the box to start with.
OK, so it requires another trim I believe after Post button is clicked.
If you want to. Or you can have it trim the whole box when it does a paste as well.
I suppose at this point, the question is, what do you want the code to do? Rather than going back and forth with it, come up with a complete list of behavior(s), and then you can derive the code to meet those behaviors.
If I’m pasting three things in the text box, then I want them to look like this when this code runs console.log(lines.length)
["ABC123", "DEF123", "HIJ123"] and not ["", "ABC123", "DEF123", "HIJ123"]
Here’s a question:
If i have this in the box already:
ABC
DEF
GHI
and I paste the following 4 lines between DEF and GHI:
123
456
789
<blank line>
What should the result look like when i push post?
In that case, since a blank line was not intentional and resulted by pasting the following:
123
456
789
The final result should look like the following (ie. without a blank line):
ABC
DEF
123
456
789
GHI
However, if a user wants, he can introduce a space between 789 and GHI or anywhere else.
Anywhere else? Even at the beginning or the end?
Yes, the user can put a space at the beginning and end and anywhere in between if it’s intentional. There can be multiple spaces as well that a user can introduce between two actual values.
So that specifically tells me you DONT want to run code when the user pushes the Post button, because if you do, it’ll erase those intentional spaces at the beginning and end.
So what you’ve got now is correct JS code wise. You just need to get rid of the extra line break inside the textarea element in your HTML code.
