Calculating remaining characters in a field

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):

remaining characters 

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:

onkeyup

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’…

onLoad of the form

Well that’s all! Here is a link to the sample application (like they like to say in Notes 8).

Advertisements

2 thoughts on “Calculating remaining characters in a field

  1. Nathan T. Freeman 2007-October-11 / 1:31 pm

    It would be interesting to link this to a javascript timer that watched the field instead, so you could also use it in the Notes client. Less efficient than the event, of course, but then it’s cross-client.

  2. Verahsieh.pixnet.net 2013-March-5 / 11:30 pm

    Please let me know if you’re looking for a writer for your blog. You

    have some really good posts and I think I would be a good asset. If you ever want to take

    some of the load off, I’d love to write some articles for your blog in

    exchange for a link back to mine. Please shoot me an e-mail if interested.
    Kudos!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s