For example: In CRM if you want to save mobile number, what you will do is, you will create a field for saving value of the mobile number. Now on an entry screen we can add this field in order to enter and save the value. The value will be saved in the mobile number field at the back-end without any problem. Now suppose on screen you want this field to appear as splitted in three different parts as shown below.
So in this case, how will you create the fields for mobile number and save the values? One thing we can do here is we can grab the data part for this particular field on entry screen from custom content onload event. Now replace this data part by the custom created simple HTML fields as shown above. Now, standard save button will not work and we need to write our routine on onclick event of the save button. Here when user clicks on save button we need to collect the values from the above created 3 custom html fields and combine them to get an entire mobile number that can be saved in mobile number field at back-end and then you can submit the page to save the value.
Suppose, you want to navigate through these three parts of the mobile number field by using Tab and Shift+Tab buttons then you can make use of the following function on your client side code.
function HandleOnKeyUpTabNextFocus(ctlstart, max, ctlNext)
{
var lcobj=new String(ctlstart.value);
if(lcobj.length==max && (event.keyCode!=16 event.keyCode!=9))
{
ctlNext.focus();
}
if(event.keyCode==16 event.keyCode==9)
{
ctlstart.focus();
ctlstart.select();
}
}
You just need to call this function on OnKeyUp event of your HTML field. Here the first parameter ctl start will be the current field that can be referred by using keyword this, second parameter is max which is maximum length and third parameter is ctlNext which will be the name of field to which we want to move to after pressing Tab button. Here if the contents of the field exceeds the maximum length set above the cursor will automatically move to next field.