Field Tab on Full

When a form author needs to capture data where there are several related fields with fixed numbers of characters, they should try to make the separate fields behave like one continuous field.

The best example I can think of is when I’m filling in a multi-part serial number.  The number usually gets broken out into several input fields.  As soon as one input field is full, you are automatically tabbed over to the next field. If you paste a long value into the first field, the pasted value is used to populate all the fields in the sequence.

Occasionally I run into a dialog box that prompts for a serial number but doesn’t give me the auto-tab and auto-paste-fill experience, and I get … angry.  How dare they force me to transcribe a 15 digit number digit-by-digit?

Today’s example shows how to bring the auto-tab and auto-paste-fill experience to a PDF form.  The sample form captures a social security number as a sequence of 3, 2 and 4 characters in 3 separate fields.

Prerequisites

For the fields of the sequence to work in concert, the script needs to know three things:

a) How many characters are in each field
b) which fields participate in the sequence
c) What order are the fields in?

The sample does this by:

  1. Define each field in the sequence as a text field with a maximum number of characters (field.value.text.maxChars).
  2. Define a custom tab order.  The next field is defined in the markup: field.traversal.traverse.ref

The sequence of fields could easily be defined in a different way.  My alternate choice would be to wrap the fields of the sequence in a subform and assume that they are in document order.

Change Event

When a user types or pastes, the change event fires.  The change event checks for:

  • If there’s more text than fits, spread the leftover text among the next fields in the sequence according to their maxChars capacity.
  • If the user’s input has caused the field to reach its maxChars value, set focus to the next field in the sequence.

Futures

There’s more that could be done.  The form could (and should) have tested the digits to make sure they’re valid for a social security number.  On deleting the last character from a field the form could automatically tab to the previous field.

 

I won’t be blogging for a bit.  I will be on vacation all next week.  In the mean time, happy form designing.

27 Responses to Field Tab on Full

  1. E. Loralon says:

    John,I was thinking about this functionality yesterday for a phone field.This really is the perfect Easter gift :)Enjoy your vacation.

  2. Jason Green says:

    This is what I am looking to do, however, I am new to livecycle and do not know how to do what you are saying. Where do I enter that information?

  3. Jason:Open the sample form (Overflow.pdf) in Acrobat or Reader and paste the value “987654320” into the first box of the social security number.John

  4. Chaunte Rodgers says:

    I have read this blog and this is something I am looking to do on my form, only I am not sure how to execute your instructions. I have gone to the script editor in my adobe live cyvle designer program 8.0 and I can not decipher how to enter the code that you have given. Like the gentleman above, I have have not yet figured out my way around livecycle. I did enough to get the form up and running, but I too have a sequence of 9 digits that need to be connected.Any help you can provide will be greatly appreciated.

  5. Chaunte:If you have a sequence of field that you want to link together, follow these steps for all but the last field:1) Select the field2) go to the script editor and from the “show” drop-down list, select “change” (the change event)3) enter this script:FullEvent.checkFull(this);Then make sure you have copied the “FullEvent” script object to your form:1) Right click on your root subform and choose “insert script object”2) rename the script object to “FullEvent”.3) copy/paste the code from the FullEvent object in my sample into your new script object.good luck!John

  6. Danielle says:

    I’m running Acrobat 8, is there anyway to get Autotab or this overflow to work?

  7. Danielle:The sample form is designed for Acrobat/Reader 8.1, but the functionality works fine in 8.0 as well. Try designing an 8.0 form and copying the content from the sample into your form.John

  8. Tanya says:

    Great Sample Form!Thanks!*bookmarking ;)

  9. James Baugh says:

    John,I am trying to get your code working on already existing pdf document. I was able to get your code up and running using a blank document, but I can’t get it to run on an existing document (without a Master Page).This is what I have done so far.- I have add the FullEvent script object from your form- Added the FullEvent.checkFull(this); To my fields- Set the Tab orderAs I stated earlier this works when creating a blank form, but I can’t get it to work on an existing form.Any ideas?

  10. James:The things I would check:- are there any javascript errors in your console window?- Did you set max chars on your field(s)?- Look at the XML source for your fields. Do you see the traversal element? Something that looks like:<traversal><traverse ref=”SSPart2[0]”/></traversal>- Are all your fields text fields (the sample doesn’t work for numerics)Good luck!John

  11. James Baugh says:

    John,It looks like the problem was occurring in the findNextField(vStartField) function.When the code did a this.resolveNode(vTraverse.ref) it was returning null. I modified the reference so that it was directly referring to the subform I was usingthis.resolveNode(‘mySubform.Page3.’+vTraverse.ref)and it worked.There is probably a better way to do this, but it is working.Thank you for the help and for the blog.

  12. Jared Price says:

    John,This is a great script. Works really well for numbers that have a known limit. Do you have a script for text fields that have variable limits relative to the size of the characters being used? Instead of testing for max chars, is there a way to test in conjunction with the ‘Limit length to Visible Area’. It would also be great if it was intelligent enough so as to not separate consecutive characters and carry entire words down to the next line. Tabbing to the previous field when deleting characters would also be amazing. Just curious if you ever got around to fleshing this script out more or if you know of another that may have built upon this.Cheers!

  13. Jared:Have you tried using growable fields? These fields will grow and shrink with the size of the data. Seems like this would be better than trying to split your content over multiple fields.Nonetheless, I took a stab at improving the script for fields where the size is limited to the visible area. (check out the updated sample). It sort of works:- There’s a new parameter bMoveWords to carry over the last word instead of the last character- On emptying a field, we attempt to move to the previous fieldThere are issues:- when you tab to the next field, the field text is selected.- When you paste large text in the middle of the field, we really don’t know how many words to move down to make room. The script does this based on # characters. But if you’re replacing i’s with w’s then it won’t fit. In this case the insert gets rejected.- When overflow happens, caret positioning is lost.Other than that it works pretty well ;-)John

  14. Jared Price says:

    John,Thanks so much for looking at this again! I’ve tried working with growable fields. This is unfortunately is an instance of function following form… no pun intended. My form has ruled lines designed into it and I’m stuck trying to get the text to align with the lines. A multi-line text field will work if I enable rich text and set it to double spacing. Actually works perfectly. Do you know if there’s a way in LiveCycle to hard code this double space setting into the text field. Otherwise it would force the user to go in and enable double spacing every time as it doesn’t save the setting with the document.Thanks!

  15. Jared:You should be able to define a field with double line spacing and plain text. After creating the field and checking “Allow Multiple Lines”, go to the Paragraph tab (shift+F5 twice) and under spacing select “Double Line”. If you look at the XML source you’ll see that it creates an element under the field that looks like: <para lineHeight=”25pt”/>. This works equally well for rich and plain text.John

  16. We are working on a fillable PDF and are looking for a solution on automating tabbing between textfields. But we are not familliar with Javascript.
    The solution in this example is just what we are looking for. So we would like to ask if it is possible if anyone could post the actual javascript code?

    Many thaks!

  17. Rinni:
    The JavaScript is inside the PDF. You need to use Adobe Designer to create/modify this form, or to adapt the JavaScript to a new form.

    John

  18. Barbara says:

    Hello, I tried to copy this PDF to use for one of my Acrobat forms. However, it does not allow me to edit any fields or see the document JS. Was this created in Acrobat or LiveCycle?

  19. John Brinkman says:

    Barbara:

    It’s designed in LiveCycle Designer

    John

  20. Yukio says:

    Hey John,
    I was trying out your sample form and whenever my overflow moves into the next field, it highlights the text and erases it. I’m using Designer 8. Is there an incompatibility issue?

    • Yukio:
      The behavior of Reader is that any time you tab to a new field, any existing content of that field will be highlighted. And then as you type, the highlighted text will be replaced by what you key in. To avoid replacing text, first press a cursor or home or end key to place your caret at the beginning or end of the text.
      John

  21. CR_newbie says:

    Question about making your numeric entries auto-tab, I see you use the script editor and use “change” and then add the “FullEvent.checkFull” but this is far as I got.. how do you enter script into the “root subform”?? Thanks for any help at all!

  22. Lance says:

    I don’t know enough about javascript to troubleshoot this on my own, I barely figured out where to paste the code to get it to work, but I did get it working and thank you for supplying this!

    One thing I notice, (and it does this on your sample page as well) when typing in text (which is the portion of this I need for my project) since it doesn’t know exactly where (in characters) to cut off the first line, it will realize it’s lapping off of the first line, seeming copy and paste those last few characters onto the second line… but those characters remain highlighted, so hitting the space bar (which is normal fluent typing) will delete those characters or hitting the next letter in sequence will replace them – either way I end up with all or part of a word missing between the two lines. I can tell this is only because after it moves the text it leaves it highlighted… is there any way to undo this?

    • John Brinkman says:

      Lance:
      I understand your pain.
      Sadly, there’s nothing we can do about the text selection behavior. That’s the standard way widgets behave when you set focus.
      John

  23. Jim MacDougall says:

    Can you post the code for this example?