JSFiddle - React, Tailwind, and code Playground
HTML
<input id="startDate "type="text" onkeydown="test1(event, this);" onkeypress="test(event, this);" name="courseDate" value="MM/YYYY" />
JavaScript
function test1(e, input)
{
var key = e.keyCode || e.charCode;
console.log(key);
if( key == 8 || key == 46 )
{
e.preventDefault();
e.stopPropagation();
setCursorPosition(input, (getCursorPosition(input) - 1));
return false;
}
}
function test(e, input)
{
console.log("test");
e.preventDefault();
e.stopPropagation();
var tempString = input.value;
var cursorPosition = getCursorPosition(input);
if(cursorPosition != 2)
{
tempString = "";
for(var i = 0; i < input.value.length; i++)
{
if(cursorPosition != i)
{
tempString += input.value.charAt(i);
}
else
{
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
} else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
tempString += String.fromCharCode(keynum);
}
}
}
input.value = tempString;
if(cursorPosition == 1)
{
setCursorPosition(input, (cursorPosition + 2));
}
else
{
setCursorPosition(input, (cursorPosition + 1));
}
}
function getCursorPosition (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);
}
function setCursorPosition(elem, caretPos) {
if(elem != null) {
...