How to change the value of input without the position of cursor going to the end?

The newest question: can you give another more robust or succinct solution that can exactly accomplish the same goal as I described?

This is the code of mine that has some problems.
I want to split every five letters with a space.

It does well if you enter or delete at the end of the input BUT when you enter or delete NOT at the end of the input, the cursor would automatically go to the end.

For instance, the textbox now have ABCDE FGHJK. If I delete the A, the cursor would go the end after deleting the A.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let Input = document.createElement("input"); 
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
// The code AFTER this need modification and improvement
Input.addEventListener("input", () => {
Input.value = Input.value.replace(/\s*/g,"");
Input.value = Input.value.replace(/(.{5})/g, '$1 ');
Input.value = Input.value.trim();
});
// The code BEFORE this need modification and improvement
document.body.appendChild(Input);

<!-- end snippet -->

How to fix the code to prevent it? (It should ONLY include original Javascript code but NOT CSS, HTML code or Jquery.)

I've tried to relocate the cursorPosition but it doesn't work...

I would appreciate that if the code is as succinct as possible.

Remember the goal is to make the input as convenient as possible.

Some examples here (| is the cursor):

Update:

Here is my fix:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
Input.addEventListener("input", () => {
const cursorPosition = Input.selectionStart;
const imValue = Input.value;
Input.value = Input.value.replace(/\s*/g,"").replace(/(.{5})/g, '$1 ').trim();
const lenDiff = Input.value.length - imValue.length;
if(cursorPosition == imValue.length) {
Input.setSelectionRange(Input.value.length, Input.value.length);
return ;
}
if(imValue[cursorPosition] === " " && Input.value[cursorPosition - 1] === " ") {
Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
return ;
}
if(imValue[cursorPosition - 1] === " ") {
Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
return ;
}
Input.setSelectionRange(cursorPosition, cursorPosition);
});
document.body.appendChild(Input);

<!-- end snippet -->

But this fix also has a problem: it cannot deal with copy and paste of multi-letter string (can only deal with single-letter input).

Update:
The problem is solved by splitting the string in the eventlistener beforeinput.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
Input.addEventListener("beforeinput", e => {
if(e.data) {
e.preventDefault();
const data = e.data.replace(/\s*/g,"");
for(let i = 0; i < data.length; i++) {
let cursorPosition = Input.selectionStart;
Input.value = Input.value.slice(0, cursorPosition) + data[i] + Input.value.slice(cursorPosition);
Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
Input.dispatchEvent(new Event("input"));
}
}
});
Input.addEventListener("input", () => {
const cursorPosition = Input.selectionStart;
const imValue = Input.value;
Input.value = Input.value.replace(/\s*/g,"").replace(/(.{5})/g, '$1 ').trim();
const lenDiff = Input.value.length - imValue.length;
if(cursorPosition == imValue.length) {
Input.setSelectionRange(Input.value.length, Input.value.length);
return ;
}
if(imValue[cursorPosition] === " " && Input.value[cursorPosition - 1] === " ") {
Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
return ;
}
if(imValue[cursorPosition - 1] === " ") {
Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
return ;
}
Input.setSelectionRange(cursorPosition, cursorPosition);
});
document.body.appendChild(Input);

<!-- end snippet -->

Modified your code a bit to restore cursor position:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
function formatValue(value) {
return value.replace(/\s*/g, "").replace(/(.{5})/g, "$1 ").trim();
}
Input.addEventListener("input", function(e) {
const cursorPosition = Input.selectionStart;
const oldValue = Input.value
Input.value = formatValue(Input.value);
const newPosition = oldValue.length < Input.value.length ? cursorPosition + 1 : cursorPosition
Input.setSelectionRange(newPosition, newPosition);
});
Input.addEventListener("keydown", function(e) {
let cursorPosition = Input.selectionStart;
let value = Input.value;
if (e.key === 'Backspace') {
e.preventDefault();
if (cursorPosition === 0) return
const offset = Input.value[cursorPosition - 1] === ' ' ? 2 : 1;
value = value.slice(0, cursorPosition - offset) + value.slice(cursorPosition);
Input.value = formatValue(value);
Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
} else if (e.key === 'Delete') {
e.preventDefault();
if (cursorPosition >= value.length) return
const offset = Input.value[cursorPosition] === ' ' ? 2 : 1
value = value.slice(0, cursorPosition) + value.slice(cursorPosition + offset);
Input.value = formatValue(value);
Input.setSelectionRange(cursorPosition, cursorPosition);
}
});
document.body.appendChild(Input);

<!-- end snippet -->

You may try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

     document.addEventListener("DOMContentLoaded", function() {
const input = document.createElement("input");
input.setAttribute("type", "text");
input.style.width = "100%";
input.style.height = "30px";
input.style.fontSize = "20px";
let previousValue = "";
let previousCursorPosition = 0;
input.addEventListener("input", function(e) {
const cursorPosition = input.selectionStart;
const value = input.value.replace(/\s*/g, "").replace(/(.{5})/g, "$1 ").trim();
input.value = value;
input.setSelectionRange(cursorPosition, cursorPosition);
previousValue = value;
previousCursorPosition = cursorPosition;
});
input.addEventListener("keydown", function(e) {
const cursorPosition = input.selectionStart;
// Handle the scenario when Backspace key is pressed
if (e.key === "Backspace" && cursorPosition > 0 && input.value[cursorPosition - 1] === " " &&                             input.value[cursorPosition] !== " ") {
e.preventDefault();
const valueBeforeCursor = input.value.slice(0, cursorPosition - 2);
const valueAfterCursor = input.value.slice(cursorPosition - 1);
input.value = valueBeforeCursor + valueAfterCursor;
input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
previousValue = input.value.replace(/\s*/g, "").replace(/(.{5})/g, "$1 ").trim();
previousCursorPosition = cursorPosition - 1;
}
});
input.addEventListener("keydown", function(e) {
if (e.keyCode === 32 && input.selectionStart !== input.selectionEnd) {
// Space bar pressed with text selected, remove spaces from the selection
const start = input.selectionStart;
const end = input.selectionEnd;
const value = input.value.substring(start, end).replace(/\s/g, "");
input.value = input.value.substring(0, start) + value + input.value.substring(end);
input.setSelectionRange(start, start + value.length);
e.preventDefault();
} else if (e.keyCode === 32 && input.selectionStart === input.selectionEnd) {
// Space bar pressed with no text selected, don't add space
e.preventDefault();
}
});
document.body.appendChild(input);
});

<!-- end snippet -->