Count remaining characters in text field

[GTEM19889]

Does the latest version of ebase have the ability for text fields to countdown the number of characters entered into a text field? I believe Rakesh mentioned this might be in the next version

We regularly get comments from users saying they find it awkward that we restrict the size of a text field which then requires them to continue re-composing their text until it fits into the box.

I know many other products on the internet offer a countdown. If ebase has this then perhaps I can push that through as a reason for upgrade.

Following me typing the above, I spoke to Hovik and he informed that it is possible to do this via Jquery but it is a bit complex. I have asked him to send me the details to see if I can figure this out.

[Vircos]

We have a textcounter for all our textarea's using the javascript Jquery library and the textAreaCounter plugin. It does exactly what you want.

Jquery library:
http://jquery.com/

textAreaCounter plugin:
http://roy-jin.appspot.com/jsp/textareaCounter.jsp

You can apply this to every textarea or to a specific textarea with a unique class.

Further details can be found at the plugin website.

[Hovik]

Here is another way not using a jsp.

1. You need 3 Jquery libraries:

jquery-1.6.1.min.js ---------- The main library
jqEasyCharCounter.min.js - The character counter library
autoresize.jquery.js --------- Used for resizing the input box as more data is entered

These need to be added somewhere within your webapp, e.g. folder webapps\ufs\shared\js

2. Add the follwong to the HTML++ section of the form

Code: Select all

<script src="shared/js/jquery-1.6.1.min.js"      type="text/javascript" charset="utf-8"></script>
<script src="shared/js/jqEasyCharCounter.min.js" type="text/javascript" charset="utf-8"></script>
<script src="shared/js/autoresize.jquery.js"     type="text/javascript" charset="utf-8"></script>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;

	$&#40;'textarea'&#41;.autoResize&#40;&#123;
	    animateDuration &#58; 300,
	    extraSpace &#58; 10
	&#125;&#41;;
	$&#40;'.charcounter'&#41;.jqEasyCounter&#40;&#123;
		maxChars&#58; 250,
		maxCharsWarning&#58; 240			
	&#125;&#41;;
&#125;&#41;;
</script>
<style>.ui-widget&#123;font-size&#58;0.7em;&#125;</style>

This says all textareas will be resized automatically (see Jquery documentation for additional parameter details), and any field with a class of charcounter will allow a maximum of 250 characters to be entered and will warn the user once 240+ characters have been entered.


3. Give each text area field you wish to apply the character counter to, a class charcounter . This can be any string provided the same string is used within HTML++

Here is how to add a class to a field control: (these steps are correct for V4.2 but may be slightly different in

• right click the field control
  select Style
  select Editor Cell from the drop down at the top right of the styling assistant
  click Advanced Properties
  double click Input Style
  select Enable local setting within the classes section
  type charcounter in the provided box

The following zip file contains a simple form containing 2 textarea fields with character counter enabled on both. It also contains a folder including the 3 Jquery libraries mentioned above.

http://www.ebaseftp.com/download/forum/ ... ounter.zip

[GTEM19889]

Sorry I have taken so long to follow this up. Have been extremely busy on another project.

Thank you so much for providing this information.

I followed almost all the instructions and then realised the instructions are meant for Version 4.2.

Which brings me back to my original question. Can I apply this to our current version (evidently 3.30).

The only problem I see is in assigning a class to a field. (I note that Vircos suggests this could be applied to all text fields, this might be a way for us to do this in 3.30 that I need to look into)

Again, if this is not possible in our version (Version 3.30) then that will provide us good reason to upgrade.

Kind regards
Terry

[AJDulk]

As far as I can remember, you can add a class to any field in 3.30 using a highlightField command. I used this to give our buttons the required styling in our forms in IE6 before upgrading to Ebase 4.3.

First you need to create the necessary highlight style in the Presentation template, then you use FPL to apply that highlight to the fields you wish to use it on, then use the view source to see exactly what Ebase made of it (it may strip out underscores but the basic name should be the same). Then use the name that Ebase has created to apply the jQuery.

[neilnewman]

Have there been any changes to the Ebase product that enables text field character counting/limiting, or are we still looking to use the "Roy Jin" code?

If we do still use the method listed in this post, where do you "Enable local settings" after selecting "Input Style", I cannot see this option anywhere?
NB: we are using Ebase version 4.5.2

[alexmcclune]

Not as far as I know, I recently implemented this (unfortunately without reading this thread until now ) and it probably isn't as nice as the solutions above as it doesn't resize the control. I did find it quite straight forward and i hope I don't miss anything in the explanation below.

Essentially I have the text area (txt_comments), plus two text controls on the form (one for static text and one for dynamic text countdown). Make sure these have id's within the html element properties so the jquery can use them. Then all I added was the jquery to text area (7000 is field limit in this example):

Code: Select all

var origCnt = 7000;
$('#txtCommentsCount').html(origCnt);

$('#txtComments').keyup(function (e) {
    var currentlen = $('#txtComments').val().length;
    if&#40;currentlen <= origCnt&#41; &#123;
        $&#40;'#txtCommentsCount'&#41;.html&#40;origCnt - currentlen&#41;;
    &#125; else &#123;
        $&#40;this&#41;.val&#40;$&#40;this&#41;.val&#40;&#41;.substring&#40;0, origCnt&#41;&#41;;
    &#125;
&#125;&#41;;  

Naturally you need the jquery library attached to the form.

To answer your specific question: Select "Control Style", "Advanced", select a style and hit the ellipsis, at the top it should state"Enable Local Setting" as a radio button option. For further info see here: http://dev-docs.verj.io/ufs/doc/Local_I ... erties.htm

[Hovik]

It's always been possible to limit no, of characters entered in a field, using the "Max. length' validator which is a field property.
For a text field this stops further characters being entered within the browser.
For a Text Area field, this validation happens on the server.

There is not an Ebase built in way of counting characters. You do need to use jQuery for this. My original post relates to V4.2 and is out of date if you're using V4.5+

I will create a sample form and instructions appropriate to V4.5.2 and post it here by early next week.

To answer your how to question, "Enable local settings" is only available when the control is linked to a property set.
In case you don't know how to link a property set:
Select the control and click the "Property set options" icon at the top of the control properties panel.

[neilnewman]

Hi Hovik,
Yesterday I managed to get your original code working, I was presuming that you could only select an input class from the list of classes available, and not enter freeform text.
I would be very interested in your newer version, but at the current time I am very happy to have a working solution.

Many thanks
Neil

[Hovik]

To do this in V4.5+

1. You need 3 Jquery libraries:

jquery-1.11.1.min.js ---------- The main library
jqEasyCharCounter.min.js - The character counter library
autoresize.jquery.js --------- Used for resizing the input box as more data is entered

These need to be added somewhere within your webapp, e.g. folder webapps\ufs\shared\js

2. Add the above 3 libraries as external scripts to the page (Page properties -> Client Scripts -> Add )

3. Add the following to the jQuery ready event of the page control
(Page control properties -> HTML Element Properties -> Custom Event Handlers: jQuery -> Event: ready)

Code: Select all

$('textarea').autoResize({
    animateDuration : 300,
    extraSpace : 10
});
$('.charcounter').jqEasyCounter({
   maxChars: 250,
   maxCharsWarning: 240         
});

You must give the page an Id or a Class Locator before you can save the HTML Element Properties.

This says all textareas will be resized automatically (see Jquery documentation for additional parameter details), and any field with a class of charcounter will allow a maximum of 250 characters to be entered and will warn the user once 240+ characters have been entered.


4. Give each text area field control you wish to apply the character counter to, a class charcounter. This can be any string provided the same string is used within the code above.
This is done using HTML Element Properties of the field control.

The following zip file contains a simple form containing 2 textarea fields with character counter enabled on both. It also contains a folder including the 3 Jquery libraries mentioned above.

http://www.ebaseftp.com/download/forum/ ... r_2015.zip

[neilnewman]

Many thanks for your good work Hovik,
I have replaced our jquery library with the one in your post and all continues to look good.

[Dave]

Or, cheap and cheerful minus jquery: just put a text control next to your text area and give it an ID of, say, myTextControl. Then add an html onKeyUp event to the text area with code like:

Code: Select all

var fieldLength=255;
document.getElementById('myTextControl').textContent='Chars left: '+(fieldLength-this.value.length);