set cursor position in textBox javascript

Question

I am trying to add new line to textBox and update textBox value with new line character in JavaScript using following code:

ele.value = ele.value + "\n";

ele.focus();

// To update cursor position to recently added character in textBox
ele.setSelectionRange(value.length, value.length);

Above code updates textBox value but doesn't update cursor position to new line.

(Though it updates cursor position when I click outside of textBox and again click inside textBox, but not when textBox is already being edited by user.)

which browser? my answer below works as expected in chrome, but not safari. — skav
– skav, Commented Nov 13, 2016 at 21:44

Chris Ochsenreither · Accepted Answer · 2016-11-13 22:04:50Z

13

This should work in Firefox as well:

HTML:

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <textarea id="myText" rows="4" cols="50" onkeypress="">The rain in Spain falls mainly on the plains.</textarea>
    <br>
    <button onclick="updateText()">Update</button>
  </body>
</html>

Javascript:

 function updateText(e) {
 var ele = document.getElementById('myText');
 var newVal = 'Old McDonald had a farm.\n';

 ele.value = newVal;
 ele.focus();

 // To update cursor position to recently added character in textBox
 ele.setSelectionRange(newVal.length, newVal.length);
}

JS Bin example

I'm selecting the text after focusing.

answered Nov 13, 2016 at 22:04

Chris Ochsenreither

2231 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skav · Accepted Answer · 2016-11-13 21:49:06Z

7

function insertNewlineAndFocus() {
  let textarea = document.getElementById("unicorn");
  textarea.value = textarea.value + "\n";
  textarea.setSelectionRange(textarea.value.length, textarea.value.length);
  textarea.focus();
}

button {
  display: block;
  margin: 10px;
}
textarea {
  min-width: 50%;
  min-height: 100px;
  margin: 10px;
}

<button onclick="insertNewlineAndFocus()">do it!</button>
<textarea id="unicorn">the most phenomenal text, really, its the best</textarea>

edited Nov 13, 2016 at 21:49

answered Nov 13, 2016 at 21:42

skav

1,47011 silver badges16 bronze badges

Collectives™ on Stack Overflow

set cursor position in textBox javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related