防止用户在输入字段中删除

Question

I want to have a text field ( <input> in HTML) that the user can only use to write text, but when deleting the text, it should prevent him from updating the state of the input element.

 <input type="text" />

I couldn't come up with a solution except to detect the user key presses on the keyboard, ie, using the onKeyUp attribute, and watch the user keystrokes until he presses the Backspace character:

 const input = document.querySelector('input') input.addEventListener('keydown', (e) => { const keyCode = e.keyCode if (keyCode === 8) console.log("Backspace pressed!") })

 <input type="text" />

However, there's a missing part here, even though the user won't be able to clear the input content by the Backspace key, he can instead use the Del key. So I would have then to handle the Del key the same way I handle the Backspace key.

Now, there's another problem, which is trying to modify the input content by overwriting the content as follows:

and then, after that, I will have to prevent the user from editing the text by cutting the content (which I have no idea how to do).

So, what are the alternatives?

Please feel free to use HTML, JavaScript, CSS, or even React.