ansaurus

Question

move cursor to the beginning of the input field?

Answer 1

+1 A:

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").setSelectionRange(0,0);

Sejanus 2010-01-24 13:41:33

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.

weng 2010-01-24 13:51:59

Got it. Updated my original answer. Works with Firefox (i.e. Gecko browsers), not sure about others.

Sejanus 2010-01-24 14:09:22

Answer 2

+3 A:

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.moveat("character", 0);
            part.moveEnd("character", 0);
            part.select();
        }else if (inp.setSelectionRange){
            inp.setSelectionRange(0, 0);}
        inp.focus();
    </script>
</body>
</html>

Mic 2010-01-24 13:55:54

Answer 3

+1 A:

Try this (for some reason doesn't work in Chrome):

<script type="text/javascript" src="http://localhost/proweb/www/js/jquery.js" ></script> 
<script type="text/javascript"> 
    $(function() {
        $.fn.setCursorPosition = function(pos) {
            if ($(this).get(0).setSelectionRange) {
                $(this).get(0).setSelectionRange(pos, pos);
            } else if ($(this).get(0).createTextRange) {
                var range = $(this).get(0).createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        } ;

        $('#title').focus(function() {
            if( 0 == $(this).val().length ) {
                $('.edit-field-overlay').hide();
            }
            $(this).setCursorPosition(0);
        });
        $('#title').blur(function() {
            if( 0 == $(this).val().length ) {
                $('.edit-field-overlay').show();
            }
        });
    });
</script>

<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>

St.Woland 2010-01-24 13:58:15

Answer 4

+1 A:

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.

Reigel 2010-01-24 14:00:16

haha..that was pretty 'lame' to be honest...but well...it worked:)

weng 2010-01-24 14:01:04

hehe.. sometimes, things can be easy... if you just don't overlook at a problem... you just have to trick the eye.. :)

Reigel 2010-01-24 14:04:02

just like magic:)

weng 2010-01-24 14:07:18

ansaurus

tags:

views:

answers:

move cursor to the beginning of the input field?

related questions