JSFiddle - React, Tailwind, and code Playground

by villard

HTML

<input id="beLowerCase" type="Text" />

CSS

/*.beLowerCase {
    text-transform: uppercase;
}*/

JavaScript

function getSelection(inputBox) {
	if ("selectionStart" in inputBox) {
		return {
			start: inputBox.selectionStart,
			end: inputBox.selectionEnd
		}
	}

	//and now, the blinkered IE way
	var bookmark = document.selection.createRange().getBookmark()
	var selection = inputBox.createTextRange()
	selection.moveToBookmark(bookmark)

	var before = inputBox.createTextRange()
	before.collapse(true)
	before.setEndPoint("EndToStart", selection)

	var beforeLength = before.text.length
	var selLength = selection.text.length

	return {
		start: beforeLength,
		end: beforeLength + selLength
	}
}

$("#beLowerCase").on('input', function(){
    
    var start = getSelection(this).start,
        end = this.selectionEnd;
    
    $(this).val( $(this).val().toUpperCase() );
    this.setSelectionRange(start, end);
});