this is part eight of JavaScript with asp.net tutorial in this video we'll discuss how to automatically move the cursor from one text box to another using javascript let's understand this with an example let's say we have a web page like this to capture credit or debit card numbers usually there are 16 digits in a credit or debit card number on this page we have got four text boxes each text box should allow four numbers so once I type the first four numbers of the credit card into the first text box we want to move the cursor automatically to the second text box look at this once I type the first three characters the cursor is still blinking in the first text box but the moment I type the fourth digit look at what's going to happen to the cursor it will be automatically moved to the second text box similarly once we type the second four digits the cursor will move to the third text box and from there it will move to the fourth text box so let's see how to achieve this using javascript let's flip to visual studio so here I have an empty asp.net web application project which I have added this waveform on this platform let's include this little text card number and let's drag and drop a text box control let's change the ID of the text box to txt 1 and let's add the width of the text box 250 pixels and let's set max length attribute to 4 because we only want to allow 4 digits let's make 3 more copies of this text box let's change the ID of the second text box to txt 2 and third text box to txt 3 and fourth text box to txt for now let's include a section for JavaScript let's write a JavaScript function let's name this move cursor and this function is going to have two parameters from text box and to text box let's create a variable let's name this length equals from textbox dot value dot length let's create another variable let's name this max length equals from text box dot get attribute so basically we want to read these max length attribute so get attribute and the name of the attribute is max length if lend equals max length okay so what are we telling with this condition now the number of characters that are typed into this text box for example if the length is equal to max length in this example 4 then we want to move the cursor to the next text box so if length equals max length we want to set the focus to 2 text box so document dot get element by ID and the ID is to textbox dot call focus method which is going to set the keyboard focus to this two text box and all that is left now is to call this javascript function on key up event so on key up event of the first text box we want to call this move cursor javascript function and from text box is going to be you know the this txt one text box itself so I'm going to use this keyword and two text box is going to be txt too okay so let's set this attribute for the second text box as well so from the second text box we want to move the cursor to the third text box and from the third text box we want to move it to the fourth text box and we don't have to set this you know on key app attribute on the fourth text box because we don't want to move the text cursor anywhere from the fourth text box automatically so we are not going to call this function on the fourth text box so with all these changes let's go ahead and run this page and look at this the moment I type the first four digits the cursor automatically moves and similar their second four digits and the third four digits and finally the fourth four digits thank you for listening and have a great day
