www.webdeveloper.com
Results 1 to 5 of 5

Thread: Using Javascript to Auto move cursor onto next form field

  1. #1
    Join Date
    Jul 2005
    Posts
    601

    Using Javascript to Auto move cursor onto next form field

    Is it possible using Javascipt to automatically send the user from one field to the next when the maxlength of the field has been reached.

    If so, how?

  2. #2
    Join Date
    Dec 2005
    Location
    Washington, DC
    Posts
    228
    yes
    Code:
    function moveOnMax(field,nextFieldID){
      if(field.value.length >= field.maxLength){
        document.getElementById(nextFieldID).focus();
      }
    }
    Code:
    <input type="text" id="testfield" maxlength=10 onkeyup="moveOnMax(this,'nextID')"/>
    <input type="text" id="nextID" maxlength=10 onkeyup="moveOnMax(this,'testfield')"/>
    Something along these lines would work.
    "God didn't create the world in seven days, he pulled an all-nighter on the sixth."

  3. #3
    Join Date
    Jul 2005
    Posts
    601
    Perfect, nice one.

  4. #4
    Join Date
    Jul 2006
    Posts
    1
    I have a similar question, but I am using "return autoTab" instead of "moveOnMax", and I have the cursor moving forward fine in IE, and Firefox. It will move back in IE without issue, but when I try to Shift+Tab in Firefox to move back a field it is automatically moving me forward again (if the max chars have been reached). How do I fix this? I am not terribly familiar with Javascript, so any help would be GREATLY appreciated.

    Here is the code I am currently using...

    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var isNN = (navigator.appName.indexOf("Netscape")!=-1);
    function autoTab(input,len, e) {
    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
    if(input.value.length >= len && !containsElement(filter,keyCode)) {
    input.value = input.value.slice(0, len);
    input.form[(getIndex(input)+1) % input.form.length].focus();
    }
    function containsElement(arr, ele) {
    var found = false, index = 0;
    while(!found && index < arr.length)
    if(arr[index] == ele)
    found = true;
    else
    index++;
    return found;
    }
    function getIndex(input) {
    var index = -1, i = 0, found = false;
    while (i < input.form.length && index == -1)
    if (input.form[i] == input)index = i;
    else i++;
    return index;
    }
    return true;
    }
    // End -->
    </script>
    </HEAD>

    <BODY>
    <TD colspan="2">65 -
    <INPUT name="parcelsegment1" input onKeyUp="return autoTab(this, 3, event)" size="4" maxlength="3"> -
    <INPUT name="parcelsegment2" input onKeyUp="return autoTab(this, 3, event)" size="4" maxlength="3"> -
    <INPUT name="parcelsegment3" input onKeyUp="return autoTab(this, 3, event)" size="4" maxlength="3"> -
    <INPUT name="parcelsegment4" input onKeyUp="return autoTab(this, 2, event)" size="3" maxlength="2">
    </td>
    </BODY>

  5. #5
    Join Date
    Dec 2010
    Posts
    1

    how to detect using a delimiter?

    how to enable move to next field by detecting a delimiter like "TAB" or space?
    idea being:
    • 5 fields
    • 5 values of varying lengths ( no max set)
    • am pasting the input from first field, and remaining fields need to populate in order based on delimiter detection.


    is this asking too much?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles