The following page was written for OpenClinica versions before 3.2: from that version on it is allowed to store up to 3999 characters in both text fields and text-areas.

counting characters

For both text-inputs and text-areas the maximum number of characters is 255. This limit has been "programmed" into OpenClinica: the limit is restricted to 4000 characters by postgres. If you want to store more than 255 characters, you must make a Discrepancy for it.

To make it a bit easier for our users, we can add a counter, that displays the number of characters left.

You can download an example-CRF here.

javascript to the rescue

We construct the counter with some javascript, using jQuery, which is already included in the code of our CRF. We put it all in the RIGHT_ITEM_TEXT of the item we want to count.

fig. 1: CRF with javascript

what does it look like?

Here you see the CRF in action:

fig. 2: CRF in action

We see to the right of the input another, disabled, input, showing the number of characters left.

fine, but how does it work?

Let's take a look at the script.

<div id="ITC"></div>
<script src="includes/jmesa/jquery.min.js">// for OC versions before 3.1.4, use jquery-1.3.2.min.js !</script>
<script lang="Javascript">
$.noConflict();
jQuery(document).ready(function($) { 
var fieldInputToCount = $("#ITC").parent().parent().find("input");

fieldInputToCount.keyup(function(){
 var textinput = fieldInputToCount.val();
 var charcount = 255 - textinput.length;
 $("#ITC").html('Characters left: ' + charcount);
      });
   }
)
</script>

First of all the div id="ITC": this is used to localize the input of which we want to count the characters plus it is used to display the message how many characters are left. We will refer to this input as fieldInputToCount and this is done with $("#ITC").parent().parent().find("input"), which takes the element called ITC and then goes to the parent and again to the parent (grandmother?) and then looks for the element of type input.
Then we define a function that is triggered by every keystroke done in this element by fieldInputToCount.keyup. We take the value of our element and call this value textinput and of this we can take the length and subtract that from 255, our maximum. This is then the number of characters left and we store it in a variable called charcount. The thing left to do is display the number of characters left and for that we use $("#ITC").html('Characters left: ' + charcount);.

If you want to apply this technique to a text-area, you can use the same script, except that you must use $("#TATC").parent().parent().find("textarea").

Other how-to-pages can be found here.

this page was last reviewed December 2013