JSFiddle - React, Tailwind, and code Playground

by dhaupin

HTML

<input type="text" value="ajklshdkla sdkljaskldj akl
sjdklajsdklajsdkljaskldj" size="100" />
<span class="vis">Cursor Position: 0</span>

JavaScript

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
	caretPosition($(this));
});

function caretPosition(input) {
	var start = input[0].selectionStart,
		end = input[0].selectionEnd,
		diff = end - start;

	if (start >= 0 && start == end) {
		$('.vis').html('Cursor Position: ' + start);
	} else if (start >= 0) {
  $('.vis').html('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
	}
}