JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/jquery-fieldselection.pack.js"></script>
<input type="text" id="target" />
JavaScript
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
$(function() {
$("#target").keypress(function(evt) {
if (evt.which >= 65 && evt.which <= 122) {
var sel = $(this).getSelection();
var val = $(this).val();
var out = val.substring(0, sel.start) + String.fromCharCode(evt.which + 1) + val.substring(sel.end, val.length);
$(this).val(out);
$(this).selectRange(sel.start + 1, sel.start + 1);
return false;
}
});
});