move cursor to the beginning of the input field?

Question

when you click on 'Ask question' here in Stackoverflow you see a text "What's your programming question? Be descriptive."

i want the same thing and all i need for that is to move my cursor to the beginning of the text field. how do i do that with jquery?

There are additional (and better, imo) answers in http://stackoverflow.com/questions/2984311/delete-default-value-of-an-input-text-on-click , which was asked 5 months after this one. — Andrew Dalke, Sep 19 '10 at 17:30
http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — ripper234, May 06 '12 at 13:13
Also, a good answer here: https://stackoverflow.com/a/8190890/1617737 — ban-geoengineering, Nov 18 '17 at 22:48

score 30 · Accepted Answer · edited Jul 25 '17 at 16:55

May be that is an overkill, but these functions are helpful to select a portion of an input field.

The code below place the cursor to the first char of the second field.

<html>
<head>
    <title>so</title>
</head>
<body>
    <input value="stack" />
    <input value="overflow" />
    <script>
        var inp = document.getElementsByTagName('INPUT')[1];
        if (inp.createTextRange) {
            var part = inp.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (inp.setSelectionRange) {
            inp.setSelectionRange(0, 0);
        }
        inp.focus();
    </script>
</body>
</html>

It's worth noting that the `createTextRange` piece of this answer can be omitted if you aren't supporting Internet Explorer. — 96ethanh, Aug 12 '21 at 18:27

score 18 · Answer 2 · edited Jul 24 '14 at 20:32

18

You can use focus() method. If I recall jQuery, its like this: $("#question_input_field_id").focus(); (If I got your question right)

Update: Setting cursor at the beginning:

$("#question_input_field_id").focus();
$("#question_input_field_id").get(0).setSelectionRange(0,0);

edited Jul 24 '14 at 20:32

Tony Brix

4,085
7
41
53

answered Jan 24 '10 at 13:41

Sejanus

3,253
8
39
52

if i got a text in a text field then if i use focus the cursor will be at the end of the text field after the text. i want it to be at the beginning before the text. – ajsie Jan 24 '10 at 13:51
Got it. Updated my original answer. Works with Firefox (i.e. Gecko browsers), not sure about others. – Sejanus Jan 24 '10 at 14:09
10

You can't use the jQuery object with setSelectionRange. This will work: $("#question_input_field_id")[0].setSelectionRange(0,0); – Andre Jun 08 '12 at 12:48
@Andre just posted the correct answer in this comment thread. – pk1557 May 27 '13 at 23:33
I am editing the original answer as suggested by @Andre to avoid confusion. – Zeeshan Jun 16 '13 at 06:11
1

setSelectionRange is undefined for my side – Hardipsinh Jadeja Aug 25 '17 at 09:45

score 6 · Answer 3 · answered Jan 24 '10 at 14:00

6

if you look into the source code of stackoverflow > ask question, you will find this:

<table style="width:668px"> 
     <tr> 
         <td style="width:50px"><label for="title">Title</label></td> 
         <td style="padding-left:5px"><input id="title" name="title" type="text" maxlength="300" tabindex="100" style="width:610px" value=""> 
              <span class="edit-field-overlay">What's your programming question? Be descriptive.</span> 
         </td> 
     </tr> 
</table>

what really is happening is that a CSS code made the <span class="edit-field-overlay"> move over the top of input box and show hide when needed... and just do what Sejanus' suggested.

answered Jan 24 '10 at 14:00

Reigel Gallarde

64,198
21
121
139

haha..that was pretty 'lame' to be honest...but well...it worked:) – ajsie Jan 24 '10 at 14:01
hehe.. sometimes, things can be easy... if you just don't overlook at a problem... you just have to trick the eye.. :) – Reigel Gallarde Jan 24 '10 at 14:04
1

+1 I found this particular sorcery to be exactly what I needed. – Josh Jun 06 '12 at 21:29

score -1 · Answer 4 · answered Jan 03 '14 at 19:52

-1

 $('#txtYourTextBox').blur(function () { 
    var val = $("#txtYourTextBox").val();
    $("#txtYourTextBox").val('');
    setTimeout(function () { $("#txtYourTextBox").val(val); }, 20);
});

answered Jan 03 '14 at 19:52

Yoky

832
10
20

Looks like this code caches the value of the input, clears it, then reapplies the same value. All of this happening every time focus leaves the input. I'm not sure how this is supposed to answer the question. – Michael Martin-Smucker May 23 '14 at 16:00

move cursor to the beginning of the input field?

4 Answers4

Linked