http://74.125.77.132/search?q=cache:ZIV5dPiW-bwJ:blog.josh420.com/archives/2007/10/setting-cursor-position-in-a-textbox-or-textarea-with-javascript.aspx+set+caret+position+onload&cd=4&hl=sv&ct=clnk&gl=se

I found this on that site but don’t know how to use it with a simple textfield as there no form example and were exactly I set ID and second parameter "caret positon". Don’t know what "parameter" is really.

Here is the code

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

if(elem != null) {
    if(elem.createTextRange) {
        var range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    }
    else {
        if(elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        }
        else
            elem.focus();
    }
}
}
´

The first expected parameter is the ID of the element you wish to insert the cursor on. If the element is unable to be found, nothing will happen (obviously). The second parameter is the caret positon index. Zero will put the cursor at the beginning. If you pass a number larger than the number of characters in the elements value, it will put the cursor at the end.

Anyone understand this guide and know how this uses with a text field in a form?

    setCaretPosition(elemId, caretPos).

    The bits in bold are the parameters; the paragraph you posted says that "elemId" is the element ID, "caretPos" is the caret position.

    So you use the function like "setCaretPosition('wibble', 42)", assuming you want to set the caret position at the 42nd character of the element with the id "wibble".

      <body onload="setCaretPosition(elemId, caretPos);">

      <script language="javascript">
      function setCaretPosition(ttp, 2) {
      var elem = document.getElementById(elemId);

      if(elem != null) {
    if(elem.createTextRange) {
        var range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    }
    else {
        if(elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        }
        else
            elem.focus();
    }
}

      }
      </script>

      <form>
      <input type='text' id='ttp' value='4444444' name='query'>
      </form>

      I tested with this but nothing happens. I try to load the function (to set position 2) when pages reloads but nothing happen and caret position only sets to beginning of text field.
      Maybe i using this <body onload="setCaretPosition(elemId, caretPos)"> wrong?

        You're passing the undefined variables elemId and caretPos to the function setCaretPosition instead of actually passing any relevant values. Try the string 'ttp' and some integer of your choice.

        And do use a brower that will give you decent information about these kinds of errors. My favorite is Firfox and its error console, along with the Firebug plugin. Safari has similar functionality built in. IE8 is a long way up from IE7, but still sucks when it comes to this.

          <body onload="setCaretPosition('ttp', '42');">

<script language="javascript">
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);

if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
</script>


<form>
<input type='text' id='ttp' value='4444444' name='query'>
</form>

            That script seems to work now but how to set/get caret number/position into a other text field on submit, instead of manually set it in script?
            Is it possible?

              Have a look at the DOM reference link at https://developer.mozilla.org/en/JavaScript

              Perhaps there's a function to return currently focused control. Else keep track on which control has focus through onfocus events for everything but the submit button. Send this data along with the form, and when you redisplay it you know where to put focus.

                Write a Reply...