Put Cursor at End of Text Input's Value

Use JavaScript to place cursor at end of text in text input element

I faced this same issue (after setting focus through RJS/prototype) in IE.
Firefox was already leaving the cursor at the end when there is already a value for the field. IE was forcing the cursor to the beginning of the text.

The solution I arrived at is as follows:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

This works in both IE7 and FF3 but doesn't work in modern browsers (see comments) as it is not specified that UA must overwrite the value in this case (edited in accordance with meta policy).

put cursor at end of text input's value

This works for me

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

how to set cursor position at the end of the value in flutter in textfield?

I've been having the same problem with setting a TextEditingController and this is what worked for me.

controller.text = someString;
controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));

TextSelection.fromPosition() does the following (from the documentation):

Creates a collapsed selection at the given text position. A collapsed
selection starts and ends at the same offset, which means it contains
zero characters but instead serves as an insertion point in the text.

Edit - another version, which is a bit shorter and suggested by others here:

controller.text = someString;
controller.selection =
          TextSelection.collapsed(offset: controller.text.length);

How to set cursor position at the end of input text in Google Chrome

It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:

$('#Search').focus(function() {
    setTimeout((function(el) {
        var strLength = el.value.length;
        return function() {
            if(el.setSelectionRange !== undefined) {
                el.setSelectionRange(strLength, strLength);
            } else {
                $(el).val(el.value);
            }
    }}(this)), 0);
});

Try this fiddle: http://jsfiddle.net/esnvh/26/

Edited to 0ms timeout, as @SparK pointed out this is enough to push to end of execution queue.

Send cursor to the end of input value in React

You can explicitly set cursor position, to do so add this to Input:

componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.text.selectionStart = this.text.value.length;
        this.text.selectionEnd = this.text.value.length;
    }
}

To prevent removing last character add a e.preventDefault() after if(e.keyCode === 8 && hasTiles && tag === '' ) {

Edited Pen

Autofocus With Cursor On End Of Textbox

Please use this code and run in your browser

$(document).ready(function() {      var input = $("#test");    var len = input.val().length;    input[0].focus();    input[0].setSelectionRange(len, len);
});

<input type="text" id="test" autofocus value="value text" />

place cursor at end of value of input field on focus | angular 2

When using Angular Reactive Forms, it seams working out-of-the-box. Here is example.

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Focus Test!</h1>
    <input #testInput type="text" [formControl]="formCtrl">
  `
})
export class AppComponent implements OnInit, AfterViewInit {
  name = 'Angular';

  @ViewChild("testInput") testInput;

  formCtrl = this.fb.control('');

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formCtrl.setValue('Test');
  }

  ngAfterViewInit() {
    this.testInput.nativeElement.focus();
  }
}

Setting focus in ngAfterViewInit(), puts cursor to the end of input value.

Here is example without Reactive Forms.

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Focus Test!</h1>
    <input #testInput type="text" [value]="value">
  `
})
export class AppComponent implements OnInit, AfterViewInit {
  name = 'Angular';

  value = '';

  @ViewChild("testInput") testInput;

  constructor() {}

  ngOnInit() {
    this.value = 'Test';
  }

  ngAfterViewInit() {
    this.testInput.nativeElement.focus();
  }
}

Also seems to be working out-of-the-box. However, Angular Reactive Forms is a bliss anyway.

Putting cursor at end of textbox in javascript

You have to focus element AND set caret position

This JSFiddle shows you how it works. jQuery has been used for simplicity in this example, but it can be completely omitted if one desires so. setSelectionRange function is a DOM function anyway.

In general it does this:

input.focus();
input.setSelectionRange(inputValueLength, inputValueLength);

Obtaining input and its value length can be obtained using DOM functionality or using library functions (as in jQuery).

Do we need input value length?

I haven't tested in other browsers but running in Chrome it allows to set a larger than actual position and caret will be positioned at the end. So something like:

input.setSelectionRange(1000,1000);

will work as expected (provided your text is shorter than 1000 characters. :)

Note: This function isn't supported in IE8 and older. All latest versions of most used browsers support it. For older versions of IE resort to text ranges.

---

Related Topics