JSFiddle - React, Tailwind, and code Playground

by carter18

HTML

<script type="text/javascript">
	var is_gecko = /gecko/i.test(navigator.userAgent);
	var is_ie = /MSIE/.test(navigator.userAgent);

	function setSelectionRange(input, start, end) {
		if (is_gecko) {
			input.setSelectionRange(start, end);
		} else {
			// assumed IE
			var range = input.createTextRange();
			range.collapse(true);
			range.moveStart("character", start);
			range.moveEnd("character", end - start);
			range.select();
		}
	};

	function getSelectionStart(input) {
		if (is_gecko)
			return input.selectionStart;
		var range = document.selection.createRange();
		var isCollapsed = range.compareEndPoints("StartToEnd", range) == 0;
		if (!isCollapsed)
			range.collapse(true);
		var b = range.getBookmark();
		return b.charCodeAt(2) - 2;
	};

	function getSelectionEnd(input) {
		if (is_gecko)
			return input.selectionEnd;
		var range = document.selection.createRange();
		var isCollapsed = range.compareEndPoints("StartToEnd", range) == 0;
		if (!isCollapsed)
			range.collapse(false);
		var b = range.getBookmark();
		return b.charCodeAt(2) - 2;
	};

	function inputKey(input, ev) {
		setTimeout(function () {
			document.getElementById("selStart").value = getSelectionStart(input);
			document.getElementById("selEnd").value = getSelectionEnd(input);
		}, 20);
	}
	function doSelect() {
		var start = document.getElementById("selStart").value;
		var end = document.getElementById("selEnd").value;
		var input = document.getElementById("testfield");
		input.focus();
		setSelectionRange(input, start, end);
	}
</script>




<h1 style="text-align:center;">
	Get or Set Cursor position in a textarea</h1>

<p style="text-align: center">
	<input id="testfield" size="100" value="Move the Cursor around here ;-)" onmouseup="inputKey(this, event)"
		onkeyup="inputKey(this, event)" /><br/><br/>
   Start Index: <input id="selStart" size="4" />
   End Index: <input id="selEnd" size="4" />
	<button onclick="doSelect()">
		Select</button>
</p>
<p>
	Write some text in the first field...