CODEWITHSUNDEEP
javascriptjquery
Mori
Mori

Reputation: 6780

Set cursor position in an input text field

After a lot of search I found the following threads:

define cursor position in form input field

jQuery Set Cursor Position in Text Area

Unfortunately in none of the posts a complete form embed code or a real example is given. Now I just don't know how to include nemisj's code (on the first link) or Mark's code (on the second link) into my form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>
  $(document).ready(function(){
$("#site").focus(function(){
    if( this.value == this.defaultValue ) {
        $(this).val("http://");
    }
});
  });
  </script>

</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="Name" /><br />
<input id="site" type="text" name="mail" value="Website" /><br />
<input type="submit" value="Send"> 
</form>
</body>
</html>

I wonder if someone could kindly help me with this as I'm badly stuck!

Many thanks in advance!

Here's the edited code, but it still doesn't work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>
function setCursor(node,pos){

    var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;

    if(!node){
        return false;
    }else if(node.createTextRange){
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    }else if(node.setSelectionRange){
        node.setSelectionRange(pos,pos);
        return true;
    }

    return false;
}
  $(document).ready(function(){
$("#site").focus(function(){
    if( this.value == this.defaultValue ) {
    $(this).val("http://");

    var node = $(this).get(0);
    setCursor(node,node.value.length);
}
});
  });
  </script>

</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="Name" /><br />
<input id="site" type="text" name="mail" value="Website" /><br />
<input type="submit" value="Send"> 
</form>
</body>
</html>

Upvotes: 19

Views: 53181

Answers (3)

Jam Roll
Jam Roll

Reputation: 23

Oh, this one's easier done than said!

<script>
function setCursorInputPosition(e, pos) {
  e.setSelectionRange(pos, pos);
}
</script>
<input onfocus="setCursorInputPosition(this, this.value.length);">

Upvotes: 1

Herms
Herms

Reputation: 38798

I think I found the error in your setCursor method. The moveStart and moveEnd methods expect two arguments, the first being the unit it should use. Also, the end position appears to be relative to the start position. So I think instead of

    textRange.moveEnd(pos);
    textRange.moveStart(pos);

you want

    textRange.moveStart('character', pos);
    textRange.moveEnd('character', 0);

See: http://msdn.microsoft.com/en-us/library/ie/ms536623(v=vs.85).aspx

Upvotes: 2

VoteyDisciple
VoteyDisciple

Reputation: 37803

Inside your <script></script> tag is where your JavaScript goes (although we prefer putting it in a separate file, so that no JavaScript lives on the HTML page itself).

Inside that, you have a call to $(document).ready(), which passes a function() { ... }. Inside that function is all the code that will be executed when your document has loaded.

Inside that function you have a call to $('#site').focus() which itself provides a function — this time one that will be called whenever the #site element gains focus. And presumably that's where you want to change the cursor position.

So, taking the setCursor function from Set cursor at a length of 14 onfocus of a textbox you can put that anywhere in your <script></script> and then inside that innermost function of yours you can write:

if( this.value == this.defaultValue ) {
    $(this).val("http://");

    var node = $(this).get(0);
    setCursor(node,node.value.length);
}

Upvotes: 4

Related Questions