Ability to retrieve the encoded value when the insert event is triggered in the browser

Question

I apologize in advance, I am using machine translation. If something is unclear, please clarify. I will try to respond promptly. (I need help, I understand it - I am interested!).

Dear developers, please tell me. Is there any possibility to get more information when inserting an event into the browser?

I need to automatically fill out a form, the problem is that users will fill out the form from an Excel document.

To do this I have a text box that I need to copy data from a table row into.

When copying from it and trying to get the data in the browser, the row starts with the first value, skipping the "spaces", that is empty cells at the beginning, same problem with empty cells in general, let's say at the end of the row it cuts off those spaces too, in the center it reduces them. I would give up, but when copying data from Excel to Google Tables - everything works fine and it knows where and how the cells are located. I need to make this behavior work for me.

I don't know what media content or code to attach for you, please post if you need information.

Thanks in advance!

I spent 3 hours trying to get it to work. Я - Trying to get this Unicode out. Tried to figure out min.js google tables. Tried to look at Event ClipBoard from different angles and haven't found anything yet, and I'm out of ideas of where to look :(

Answer 1

The answer was quite simple, you just need to get the data in HTML format

  <TextField
    onPaste={(e) => {
       setAutoFillPatternString(e.clipboardData.getData('text/html'));
    }}
    error={autoFillPatternError.length > 0}
    helperText={autoFillPatternError}
    autoFocus
    multiline
    required
    value={autoFillPatternString}
    margin="dense"
    label="Ctrl + V"
    fullWidth
    variant="standard"
 />

and then just get the values from the table

function validatorDataString(countRows: number, dataString: string) {
    const resultDataForms: string[] = [];
    let validation: boolean;
    const table = new DOMParser().parseFromString(dataString, 'text/html');

   if (!table.body.getElementsByTagName('table')[0]) {
      validation = false;
      resultDataForms.push('error result copy data');
      return { validation, resultDataForms };
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Array.from(table.body.getElementsByTagName('table')[0].rows[0].children).forEach((tdItem: any) => {
    resultDataForms.push(tdItem.innerText);
   });

   validation = countRows === resultDataForms.length;
   return { validation, resultDataForms };

}