CodeMirror: Set Focus at End of Line
CodeMirror is a WYSIWYG-like editor that allows for rich text editing on a small scale, oftentimes used to allow Markdown editing, much like ReviewBoard uses it for. One problem I've found, however, is that calling a CodeMirror instance's focus method put the cursor at the beginning of the input, which is annoying when there is input in the field. In theory you'd always want to put the cursor at the end so that the user can continue adding to the text that's already there.
Here's a snippet that will set the cursor to the end of existing input:
cmInstance.focus();
// Set the cursor at the end of existing content
cmInstance.setCursor(cmInstance.lineCount(), 0);
You would think that there would be a method which would accomplish this task, or even have focus set the cursor to the end of input by default if the instance has existing text. Anyways, this is the code that will put the cursor at the end of your CodeMirror input instance!
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![CSS Transforms]()
CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements. One or more transformations can be applied to a given element and transforms can even be animated...
![CSS Sprites]()
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means...
HI David,
I was able to set cursor at end of the code mirror lines on tab with your code, but after that i want to get out of code mirror window and should move focus to next button.With above code, not able to get focus out of code mirror, can you suggest a way to do that? Thanks.
This is how i am writing it, also set tabindex=0 for next button available.
_editor.setOption('extraKeys', { Tab(cm) { cm.focus(); cm.setCursor(cm.lineCount(), 0); }, });