Skip to main content

To limit the maximum length of input field during typing you have to assign a Control CCS Class to an text box. The class name is a concatenation of string 'kob-maxtextlen-' and a number giving the maximum text length.

After assigning the Control CCS Class and activating the javascript you will find below, a little box is shown during field input on top and on left of the input control counting down the yet available input characters:

 

Javascript code:

NWF$(document).ready(function () {

   NWF$("body").append('<div id="charCounter";></div>');  // create div for counter

   var zaehlerFeld = NWF$('#charCounter');   // save as jquery object

   zaehlerFeld.hide(); // hide the div

   NWF$(">class*=kob-maxtextlen-]").each(function () { // for all html elemts with class name beginning with kob-maxtext-len

      var classes = this.className.split(" ");  // splitt class names

      for (var i = 0; i < classes.length; i++) {  // for all class names of the actual html

         if (classes.substr(0, 15) == "kob-maxtextlen-") {   // check if class name begins with kob-maxtext-len

            var maxlen = parseInt(classes.split('kob-maxtextlen-')p1]); // extract the number at the end of the class name

            NWF$(this).on('focus input blur', function () { // define an event function

               zaehlerFeld.show();   // show counter

               zaehlerFeld.css({   // format counter

                                 "text-align":"center",

                                 "display":"inline-block",

                                  "background-color":"#FFF",

                                  "border":"1px solid",

                                  "box-shadow":"3px 3px 3px #888",

                                  "height":"16px",

                                  "width":"22px"

                              });

               MaxTextLaenge(NWF$(this), maxlen, zaehlerFeld);  / call check function

            });

            NWF$(this).blur(function () {

               zaehlerFeld.text(' ');

               zaehlerFeld.hide();

            });

         }

      }

   });

 

});

 

function MaxTextLaenge(textFeld, maxAnzahl, zaehlerFeld) {

   zaehlerFeld.position({  // positioning the counter

      my: "left top-16",

      at: "left top",

      of: textFeld,

      collision: "fit"

   });

   if (textFeld.val().length > maxAnzahl) { // more then max characters enterd

      textFeld.val(textFeld.val().substr(0, maxAnzahl)); // limit to max text length

      textFeld.css('border-color', 'red');  // show control border in red

      zaehlerFeld.text(0);   // no more input allowed

   } else {

      zaehlerFeld.text(maxAnzahl - textFeld.val().length); // count down counter

      textFeld.css('border-color', "");   // normal border

   }

}

 

Minimized:

NWF$(document).ready(function(){NWF$("body").append('<div id="charCounter";></div>');var zaehlerFeld=NWF$('#charCounter');zaehlerFeld.hide();NWF$("eclass*=kob-maxtextlen-]").each(function(){var classes=this.className.split(" ");for(var i=0;i<classes.length;i++){if(classes.substr(0,15)=="kob-maxtextlen-"){var maxlen=parseInt(classes.split('kob-maxtextlen-')m1]);NWF$(this).on('focus input blur',function(){zaehlerFeld.show();zaehlerFeld.css({"text-align":"center","display":"inline-block","background-color":"#FFF","border":"1px solid","box-shadow":"3px 3px 3px #888","height":"16px","width":"22px"});MaxTextLaenge(NWF$(this),maxlen,zaehlerFeld)});NWF$(this).blur(function(){zaehlerFeld.text(' ');zaehlerFeld.hide()})}}})});function MaxTextLaenge(textFeld,maxAnzahl,zaehlerFeld){zaehlerFeld.position({my:"left top-16",at:"left top",of:textFeld,collision:"fit"});if(textFeld.val().length>maxAnzahl){textFeld.val(textFeld.val().substr(0,maxAnzahl));textFeld.css('border-color','red');zaehlerFeld.text(0)}else{zaehlerFeld.text(maxAnzahl-textFeld.val().length);textFeld.css('border-color',"")}}

I did exactly as this post suggests and it did not work. The small character count did appear and the maximum number of characters did not work. I am using a multiline text box the is connected to my lists.

Hi Michael,

no problems here. I have tested with list form and multiline textbox control connected to a list column of type 'Multiple lines of text' (Nintex Forms 2013 Version: 2.6.0.0). Any errors in debugger console?

Kind regards

Manfred

I am running Nintex Forms 2013 v2.4.0.0.

1. I have a multiline text field called "lotsoftext"

2. I added "kob-maxtextlen-50" to the Control CSS Class

3. I copied the java to the Form Settings Custom Java Script

4. Save and published the form.

No counter appears and no error message or max length?

Hi Michael,

please open developer tools in browser (F12-key) before viewing form and take a look at console. Can You see any JavaScript errors while viewing form and entering text field? Also You can set breakpoint in coding (by using debugger tool or by adding debugger statement to coding) to see that coding is executed.

Kind regards

Manfred

This worked great!  I was even able to make the box a bit wider by changing the width setting to accommodate a 1000-character limit for a multi-line field.

Hi Manfred,

I used your solution on office 365, but I give this error when I "create new Item"

Can you help me about that?

Hi @mlauer , @clrowe1124 



 



Cool solution, althought it may need some changes as it doesn't work as it is for me. I checked on the console and I get an error saying : classes.substr() isnt a function. I don't know much about js but I think that is because 'classes' is an array, therefore it wouldnt make sense to use the substr() method.



 



Could anyone check if that's the problem and how can we solve it?



 



Thanks!

Sorry, @nico1, it's been a long time since I worked on the code. I checked the code I put into the test form I built and it is slightly different for those method calls. You have to include the variable in the substr method (classes[i].substr) and split methods (classes[i].split).  Here's the full version that is working in my environment; I also changed the width of the box that displays to count the characters to 30 px since I had more characters to count:



 



NWF$(document).ready(function(){NWF$("body").append('<div id="charCounter";></div>');var zaehlerFeld=NWF$('#charCounter');zaehlerFeld.hide();NWF$("[class*=kob-maxtextlen-]").each(function(){var classes=this.className.split(" ");for(var i=0;i<classes.length;i++){if(classes[i].substr(0,15)=="kob-maxtextlen-"){var maxlen=parseInt(classes[i].split('kob-maxtextlen-')[1]);NWF$(this).on('focus input blur',function(){zaehlerFeld.show();zaehlerFeld.css({"text-align":"center","display":"inline-block","background-color":"#FFF","border":"1px solid","box-shadow":"3px 3px 3px #888","height":"16px","width":"30px"});MaxTextLaenge(NWF$(this),maxlen,zaehlerFeld)});NWF$(this).blur(function(){zaehlerFeld.text(' ');zaehlerFeld.hide()})}}})});function MaxTextLaenge(textFeld,maxAnzahl,zaehlerFeld){zaehlerFeld.position({my:"left top-16",at:"left top",of:textFeld,collision:"fit"});if(textFeld.val().length>maxAnzahl){textFeld.val(textFeld.val().substr(0,maxAnzahl));textFeld.css('border-color','red');zaehlerFeld.text(0)}else{zaehlerFeld.text(maxAnzahl-textFeld.val().length);textFeld.css('border-color',"")}}

thanks ver much!

Have been looking for something like this. Was able to successfully get this to work with relative ease. Had a follow-up question. If I wanted to add wording in front of the count, where would I exactly place it within the code? I would like to add "Characters remaining:"



Thanks.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings