How to Get the Cursor Position in a Textarea

.txtarea {
  width: 300px;
  height: 150px;
  font-size: 12px;
  font-family: Arial;
  padding: 5px;
  text-align: left;
  border: 1px solid red;
}

<textarea class="txtarea">Mytext</textarea>

<!--just an example, auto-fill this content through a JS oninput event -->
<div class="txtarea"><span>M</span><span>y</span><span>t</span><span>e</span><span>x</span><span>t</span></div>

Get cursor position (in characters) within a text Input field

Easier update:

Use field.selectionStart example in this answer.

Thanks to @commonSenseCode for pointing this out.

---

Old answer:

Found this solution. Not jquery based but there is no problem to integrate it to jquery:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

get text under current cursor positon inside a textarea

You are wellcome,

var borderChars = [' ', '\n', '\r', '\t']
$(function() {
    $('textarea').on('click', function() {
        var text = $(this).html();
        var start = $(this)[0].selectionStart;
        var end = $(this)[0].selectionEnd;
        while (start > 0) {
            if (borderChars.indexOf(text[start]) == -1) {
                --start;
            } else {
                break;
            }                        
        }
        ++start;
        while (end < text.length) {
            if (borderChars.indexOf(text[end]) == -1) {
                ++end;
            } else {
                break;
            }
        }
        var currentWord = text.substr(start, end - start);
        console.log(currentWord);
    });
});

How to find X and Y position of text caret/cursor

You can't get the exact coordinates of the text caret effortlessly, but this snippet will give you a rect object with the approximate coordinates of the window's current selection. You may have to also add/subtract use additional offsets of containing elements depending on your styling.

const selection = window.getSelection();
const range = selection.getRangeAt(0);
rect = range.getBoundingClientRect();

Change the cursor position in a textarea with React

You have to change the cursor position after the state has been updated(setState() does not immediately mutate this.state)

In order to do that, you have to wrap this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1; in a function and pass it as the second argument to setState (callback).

handleKeyDown(event) {
      if (event.keyCode === 9) { // tab was pressed
          event.preventDefault();
          var val = this.state.scriptString,
          start = event.target.selectionStart,
          end = event.target.selectionEnd;
          this.setState(
              {
                  "scriptString": val.substring(0, start) + '\t' + val.substring(end)
              },
              () => {
                  this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1
              });
      }
 }

jsfiddle

Angular - How to set caret position in textarea

Focussing elements in Angular is often a difficult thing to implement. Although, it looks like your code is working when using a FormControl instead of ngModel (working stackblitz):

Template:

<textarea #textArea [formControl]="formControl"></textarea>

Component:

@ViewChild('textArea') _textArea: ElementRef;

formControl = new FormControl(this.title);

ngAfterViewInit(): void {
  const textArea = this._textArea.nativeElement as HTMLTextAreaElement;
  textArea.focus()
  textArea.setSelectionRange(0, 0);
}

Module (add ReactiveFormsModule to imports if not present yet):

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ]
})

You'll definitely need the focus() cause setSelectionRange only sets the cursor and wont have much use without focus.

---

Related Topics