September 8, 2007
Beginner to Beginner: Setting the cursor in a textarea via Javascript, in Firefox
Suppose you want to positing the insertion point in a textarea on an HTML page using javascript. (If you don’t want to suppose that, then stop reading now.) This is basic stuff for real programmers, but it took me longer than it should to figure out exactly how to get this to work, so pardon my step by step instructions. I figure it might save some other clodhopping amateur like me the effort of figuring out what’s so obvious to real programmers that they don’t bother mentioning it.
So, let’s say your HTML page has a textarea element — you know, one of them type-in fields. In fact, let’s say the entire body of your page looks like this at the code level:
<textarea id=”ta”>01234567</textarea>
<input type=”button” value=”Move cursor to after first letter” onclick=”setsel()”>
That’ll make a page that looks like this:
(The button doesn’t work. It’s just for show. But see below.)
In case any of this is unclear, the first line creates a textarea with an identifer that I made up (“ta”), and containing “01234567” as its initial text. The second line creates the button, gives it a label, and says that when a user clicks it, the function “setsel()” should be executed. But you already knew that.
Here’s the operative part of the function “setsel()”:
var tarea=document.getElementById(“ta”);
tarea.focus();
tarea.setSelectionRange(1,1);
The first line creates a variable called “tarea” and assigns it the textarea that has the identifier “ta.”
The second line tells it that that’s the element on the page that is going to receive the user interaction. (I lost a couple of hours not realizing the textarea had lost the focus. You may not always need this line. But what could it hurt?)
The third contains the command that works in Firefox (but not IE) for selecting a range of text. It takes two parameters: The position of the character where the selection should start and the position of the character where it should end. (Note: The second value does not say how many characters should be selected.) This is a zero-based system: The spot before the first character is 0. So, if you tell setSelectionRange (and capitalization counts!) to begin at 0 and end at 1, it will select the first character. If you tell it to begin and end at, say, 1, nothing will be selected, and the insertion point will be between the “0” and the “1” in this particular example.
Because I am such a fun guy, fill in the values you want in the following two boxes and click away to select the text in the same textarea. (Remember, only Firefoxers can play this exciting game!)
You’d better read any comments before taking this seriously because I’m guaranteed to have gotten it wrong, possibly in destructive and certainly in embarrassing ways. [Tags: javascript amateurs setSelectionRange mozilla firefox tutorial wrong_in_public_again]
