JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="123456" id="input" />

JavaScript

/*
** Returns the caret (cursor) position of the specified text field.
** Return value range is 0-oField.length.
*/
function doGetCaretPosition (oField) {

// Initialize
var iCaretPos = 0;

// IE Support
if (document.selection) {

// Set focus on the element
oField.focus ();

// To get cursor position, get empty selection range
var oSel = document.selection.createRange ();

// Move selection start to 0 position
oSel.moveStart ('character', -oField.value.length);

// The caret position is selection length
iCaretPos = oSel.text.length;
}

// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionStart;

// Return results
return (iCaretPos);
}


/*
** Sets the caret (cursor) position of the specified text field.
** Valid positions are 0-oField.length.
*/
function doSetCaretPosition (oField, iCaretPos) {

// IE Support
if (document.selection) {

// Set focus on the element
oField.focus ();

// Create empty selection range
var oSel = document.selection.createRange ();

// Move selection start and end to 0 position
oSel.moveStart ('character', -oField.value.length);

// Move selection start and end to desired position
oSel.moveStart ('character', iCaretPos);
oSel.moveEnd ('character', 0);
oSel.select ();
}

// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0') {
oField.selectionStart = iCaretPos;
oField.selectionEnd = iCaretPos;
oField.focus ();
}
}


var input = $('input');
Event.observe(input, 'keydown', function(e) {
   input._lastvalue = input.value; 
});
Event.observe(input, 'keyup', function(e) {
    if(input.value == input._lastvalue) return;
    if(input.value.length <= input._lastvalue.length) return;
    var caretPos = doGetCaretPosition(input);
    input.value = input.value.slice(0,caretPos) + input.value.slice(caretPos+1);
    doSetCaretPosition(input, caretPos);
});