The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Mover Cursor to End of Textarea

Setting the value of a textarea moves the cursor to the end. So you just need to save the value, clear it, focus it, and re-apply the value and you're good.

$("button").on("click", function() {
  // cache textarea as we need it more than once
  var textarea = $("textarea"),
      // save old value as we need to clear it
      val = textarea.val();
  // focus textarea, clear value, re-apply

This demo does that but also applies a little bit of UX. If the textarea's current value doesn't end in a space, add one. Just so you can click-and-keep-typing as you might.

Check out this Pen!

You could make it a plugin as well:

$.fn.focusToEnd = function() {
   return this.each(function() {
       var v = $(this).val();

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed