On Assono’s blog I read a SnTT-article that demonstrates a way to show the remaining characters for a field on a Notes form. In his example the value are being written in a second field.
It reminded me about a similar request I had. A customer wanted to have (on a Domino form) several input fields below each other in stead of one textarea field. This would make it easier to write the data afterwards to a different system (each new field would resemble a breakline). When the maximum number of characters has been entered the next field should be shown and get focus so the end-user could continue writing.
In my approach I used a <SPAN> tag in stead of an extra design element (field). The next image demonstrates what came up with (untill now):
Since I have started working with the Prototype JS library recently (yes shame on me) , this was a nice case to try and implement it in an application.
What can illustrate maybe best how it works is the next image of the onKeyUp event:
Each field has on it’s right a <SPAN> tag. For each field is definited how it should behave, what it should show when and where. If the field-value has come to a certain length (a variable in the HTML Head Content) the next field should be displayed and have focus, on this condition that the current field contains the attribute “nextstep = follow”. Therefor the last field in the example misses this extra attribute.
I also added 3 keycode events to the condition so no backspace, arrow left and arrow right is taking in notice.
In the onLoad event of the form I added the maxlength attribute from the JS variable to all concerning fields . I have noticed that in order to let Internet Explorer understands that you want to add a value to it you need to write ‘maxLength’ in stead of the expected ‘maxlength’…
Well that’s all! Here is a link to the sample application (like they like to say in Notes 8).