JavaScript For Automatically moving Between Textboxes

9,735 Expert Mod 8TB

Hi there!

I'm trying to write a simple JavaScript that will move the cursor to the next TextBox after 5 characters (or numbers) have been entered. I'm attempting to get this working in all browsers and realize that I'll likely have to write more than one script depending on which the user is using.

Anyways, everything I've tried...I've only come up with something that "sort of" works in IE (only).
The cursor will be moved to the next TextBox when the count reaches 5 but the 5th character is not printed because it's being replaced by the tab event (keyCode=9).

This will not work for FireFox, nor Opera. I've changed "keyCode" to be "charCode".... Alas, it will not tab to the next TextBox...it just prints a space instead.

So, after attempting this solution I tried to use the focus() method instead.

I have no idea why, but this won't work in any browser.

Does anyone have a suggestions on how to go about solving this problem?

I'm pretty stuck.

Thanks :)

-Frinny

Apr 2 '07 #1

Subscribe Post Reply

4963

mrhoo

428

256MB

Why limit yourself to 5?
This script will advance the focus from any input with a maxLength property when the number of digits or characters equals the maxlength.

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<title>Moving Focus</title>
 
<script type="text/javascript">
 
function after5(e){

    var who= e? e.target: event.srcElement;    

    if(who.value.length< who.maxLength) return true;    

    var group= who.form.elements;
 
    var L= group.length-1, tem;

    for(var i=0; i<L; i++){

        tem= group[i];

        if(tem==who && group[i+1]) return group[++i].focus();

    }

}

onload= function(){

    var A=document.getElementsByTagName('input');

    var L= A.length;    

    for(var i=0; i< L; i++){

        var tem=A[i];

        if(tem.maxLength)tem.onkeyup= after5;    

    }

    A[0].focus();

}

</script>

</head>

<body> 

<h1>Moving focus</h1>

<form action='' onsubmit="return false;">

<p><label>First box: 5 characters <input name="in_1" type="text" size="5" maxLength="5" value=""></label></p>

<p><label>Second box: 5 characters <input name="in_2" type="text" size="5" maxLength="5" value=""></label></p>

<p><label>Third box: 3 characters <input name="in_3" type="text" size="3" maxLength="3" value=""></label></p>

<p><label>Fourth box: 7 characters <input name="in_4" type="text" size="7" maxLength="7" value=""></label></p>

<p><label>Fifth box: 5 characters <input name="in_5" type="text" size="5" maxLength="5" value=""></label></p>

<p><input type="button" value="Submit"></p>

</form>

</body>

</html>

Apr 2 '07 #2

Frinavale

9,735

Expert Mod 8TB

Why limit yourself to 5?
This script will advance the focus from any input with a maxLength property when the number of digits or characters equals the maxlength.
...

Mr. Hoo you are Awesomel!

Thank you so much!
I never even thought about using the max length.
I ended up finally getting the focus() to change to the next textbox (had a case sensitive issue with my getElementByID() )...

But then ran into a few problems for when the user's input was something like backspace...and even had to write code to check how many characters were in the fields if the focus had changed.

The max length check gets rid of both these problems completely!
This is such a complete solution to my problem.
I hope you don't mind me using it as is.

Thanks again!
:)
-Frinny

Apr 2 '07 #3

by: Cardman | last post by:

Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...

Javascript

javascript to change cell background colours on a timer.

by: Peter Williams | last post by:

Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+

Javascript

comparevalidators and javascript

by: sramruttun | last post by:

hi I have 2 textboxes for entry of start and end dates. I allow typing in the textboxes also. I have 2 compareValidator fields as well to validate the 2 textboxes which work fine. Upon text...

ASP.NET

Javascript into ASP.Net Simple example wanted.. Sum Textboxes client side

by: Davisro | last post by:

I would like to have a total box show the totol of four textboxes when anyone of them change. I know I could do this via postback, but would like to do this on client side utilizing javascript....

ASP.NET

javascript datagrid events inside item template

by: Luis Esteban Valencia Muñoz | last post by:

I have a datagrid that displays editable text fields (2 different price fields) and a checkbox in every row. It has a "SaveChanges" button at the bottom, which, when pressed, looks at every...

ASP.NET

Dynamically generate textboxes using javascript

by: Sirisha | last post by:

Hi, I want javascript for displaying multiple textboxes dynamically. ADD-this is button. if i click button first time it will display 1 textbox and if i click 2nd time it will display another...

Javascript

Determine when mousewheel stops moving?

by: =?Utf-8?B?UmljaA==?= | last post by:

In a database search application (vb2005), the user wants to be able to scroll through records using the mousewheel. The data display form contains textboxes for the main data and a datagridview...

Visual Basic .NET

Can u help to solve Menu problem in Html using javascript

by: davidson1 | last post by:

Hai friends..for menu to use in my website..i found in one website....pl look below website.... http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm i downloaded 2 files.... ...

Javascript

Problem in MaskedEditExtender with javascript

by: =?Utf-8?B?QWJoaQ==?= | last post by:

Hi All, i have 3 textboxes for area Code,phone number and Extention and each have MaskedEditExtender associated with it. i want that when the length of first text box reaches it's maxlength ,...

ASP.NET

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

JavaScript For Automatically moving Between Textboxes

Similar topics