[imtiaz123]

I have drawn a text box.I want to count keystroke value and when it cross maximum given value like 70 characters it will show a warning message.Where i put this code and how can i do?

[blackbird]

Take a Text Field (id: count) and a Label (id: label0000000001).

Code: Select all

var strokeCount = 0;
var rstrokeCount = 0;

$("#count").keyup(function(){
      $("#label0000000001").text("Count: " + (++strokeCount));
});

[imtiaz123]

Thank you.
I want to to count characters from text box and if exceed the given length suppose 70 characters it show warning.

[amosbatto]

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.

[imtiaz123]

Thank You
I also want to count how many characters remaining to input in textarea.

[amosbatto]

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

[imtiaz123]

Thank You amosbatto ...it's working

[cosyxu]

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.

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

[sindani77]

Thank you for solution it works, and validate https://writeablog.net/e1mcvve5z4