Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.

Moderator: ArturoRobles

Forum rules: Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
#789459
Textareas do not have a property to limit the maximum length of their content like textboxes. The easiest way to set a maximum length on their content is to set the validate property of the textarea to:
^[\S\s]{0,70}$
Change 70 to the maximum number of characters which you want to allow. Then, set the validation error message property to a message like:
Cannot be longer than 70 characters

To warn the user, instead of setting a hard limit on the amount of content allowed in a textarea, add JavaScript code to the DynaForm to use the setOnchange() method to check the length of the value in the textarea and window.dynform.flashMessage to display a warning message to the user:
Code: Select all
$("#specialOrder").setOnchange(function (newVal, oldVal) {
  if (newVal.length > 70)
    window.dynaform.flashMessage( {
        emphasisMessage: "Please limit to a maximum of 70 characters.",
        message: " ",
        duration:  4000,
        type: 'info',
        appendTo: $('#specialOrder')     
   } )
} );
Where "specialOrder" is the ID of your textarea.
#789499
This code will count the number of characters in your textarea, textbox, etc. and display it below the field, where the ID of the field is "instructions":
Code: Select all
var limit = 70; //set to max number of characters
$("#instructions").find("div.pmdynaform-field-control").append(
  '<br><span id="charCounter" style="text-size:small;"></span>');

$("#instructions").getControl().keypress( function(evnt) { 
  var charCount = this.value.length;
  //if pressed backspace or delete key
  if (evnt.keyCode == 8 || evnt.keyCode == 46) {
     charCount--;
  }
  //if enter or character key
  else if ((evnt.keyCode==13 || evnt.charCode >= 32) && 
           !evnt.ctrlKey && !evnt.altKey && !evnt.metaKey) {
     charCount++;
  }
  
  var msg = charCount+" / "+limit+" characters";
  
  if (charCount > limit) {
     msg = '<font color="red">'+(charCount-limit)+' over limit.</font> '+msg;
  }
  $("#instructions").find("#charCounter").html(msg); 
} );

function setCharCount(newVal, oldVal) { 
  var charCount = newVal.length;
  var msg = charCount+" / "+limit+" characters";
  
  if (charCount > limit) {
     msg = '<font color="red">'+(charCount-limit)+' over limit.</font> '+msg;
  }
  $("#instructions").find("#charCounter").html(msg); 
}

$("#instructions").setOnchange(setCharCount);    //when value changes
setCharCount($("#instructions").getValue(), ''); //when DynaForm loads
Attachments
(2.45 KiB) Downloaded 148 times
#828218
Hi Amo,

Thanks for your solution. However it seems it doesn't work for delete or copy / paste when I use "keypress".

I have improved your code a little bit so it will work for both enter / delete. Also, it can be used for multiple textareas at the same time.

Enjoy. 8)
Code: Select all
//======================================== Characters left calculation for textbox====================================//
var limit = 2000; //set to max number of characters

CharCalFunction("controlID");

function CharCalFunction(controlID){
    $("#" + controlID).find("div.pmdynaform-field-control")
    .append('<div><small id="'+ controlID +'_charCount" class="text-muted float-right"></small></div>');
    //if pressed backspace or delete key
    $("#" + controlID).find("textarea").keydown(function(evnt){ 
      var charCount = this.value.length;
      if (evnt.keyCode == 8 || evnt.keyCode == 46) { 
        charCount--;
      }
      updateCharCount(charCount, controlID);
    });
    //if enter or character key
    $("#" + controlID).find("textarea").keyup(function(evnt){ 
    
      var charCount = this.value.length;
      if ((evnt.keyCode==13 || evnt.charCode >= 32) && 
              !evnt.ctrlKey && !evnt.altKey && !evnt.metaKey) {
        charCount++;
      }
      updateCharCount(charCount, controlID);
    });
    
    function updateCharCount(newCount, controlID){
      var msg = newCount + " / " + limit + " characters";
      if (newCount > limit) {
        msg = '<font color="#e4655f">' + (newCount - limit) + ' over limit.</font> ' + msg;
        //  msg = '<font color="#e4655f">' + msg + '</font>';
      }
      $("#" + controlID).find("#" + controlID + "_charCount").html(msg); 
    }
    
    function setCharCount(newVal, oldVal, controlID){ 
      var charCount = newVal.length;
      updateCharCount(charCount, controlID);
    }
    //Start
    $("#" + controlID).setOnchange(setCharCount);    //when value changes
    setCharCount($("#" + controlID).getValue(), '', controlID); //when DynaForm loads
}

//==================================================================================================================//
Thanks,
Yuan

Hello I have the latest version of this app on my[…]

Export Workflow as image

Hello Is there a way to create a process that list[…]

Sometimes the data comes from a user, like when a […]

Found the solution here: https://www.pmusers.com/i[…]