JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="test" value="Text text text text text" />&nbsp;&nbsp;&nbsp;&nbsp;

JavaScript

$(document).ready(function(){

	// Check and correct selection started inside input
	$('#test').on('select', function(evt){
		//var selectedRange = window.getSelection().getRangeAt(0);
		console.log('select:', evt.target.selectionStart, evt.target.selectionEnd, evt.target.selectionDirection);
		if (1 > evt.target.selectionStart) {
			evt.target.setSelectionRange(
				1,
				evt.target.selectionEnd,
				evt.target.selectionDirection
			);
		}
	});
		
	// Check and correct selection started outside input
	/*
	$(window).on('mousedown', function(evt){
		var el = $('#test')[0];
		$(window).on('mousemove.selectioncheck', (evt2) => {
			var sel = window.getSelection();
			console.log('contains:', sel.containsNode(el, true) );
			console.log(' mousemove:', el.selectionStart, el.selectionEnd, el.selectionDirection);
			if (2 > el.selectionStart) {
				evt2.preventDefault();
				// var selectedRange = sel.getRangeAt(0);
				// selectedRange.setStart(el, Math.max(2,selectedRange.startOffset));
				el.setSelectionRange(
					Math.max(2,el.selectionStart),
					el.selectionEnd,
					el.selectionDirection
				);
			}
		}).on('blur.selectioncheck mouseup.selectioncheck', (evt2) => {
			$(window).off('.selectioncheck');
		});
	});
	*/
	
	
	/*  
	 	document.addEventListener("selectionchange", function(evt) {
	 		var selectedRange = window.getSelection().getRangeAt(0);
	 		console.log('selectionchange:', evt.target, selectedRange.startOffset, selectedRange.endOffset);
	 	});
	 */
});