Text field Character Count Down

  • 2
  • Idea
  • Updated 2 years ago
It would be nice to optionally show users how many characters they have remaining on a text field or area.  We don't always want them to get the ugly message that they have input too many characters when they click save, we want them to see the number of characters remaining as they are typing so they can plan their text accordingly.

Like this:


Too many comments:
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
We accomplished the above example using a field render snippet and field CSS.  Declarative would be nice.  :)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Can you share with us?
Photo of Tyler Neal

Tyler Neal

  • 760 Points 500 badge 2x thumb
Would be very interested in how this is done!
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Here's how we did it.  There is a field render snippet, and a CSS class.

Field Render Snippet
Snippet (In-Line), we called: charCountDown
CSS, we called: taskCommentsUI


charCountDown snippet basically updates as the field is modified and applies the error message CSS

************************************************************************

var field = arguments[0],       value = skuid.utils.decodeHTML(arguments[1]),
    $ = skuid.$;
  

  
// Run the default renderer    
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (field.mode === 'edit') {
    
    var errorMessageBox;
    var addFieldError = function(errorMessage) {
        if (!errorMessageBox) {
           errorMessageBox = field.element.find('.field-error-messages');
           if(!errorMessageBox.length) {
               errorMessageBox = $('<div class="field-error-messages">');
               field.element.append(errorMessageBox);
           }
       }
       errorMessageBox.show();
       field.element.addClass('my-required-field');
       errorMessageBox.text(errorMessage);

    };
    
    var input = field.element.find(':input');
    
    var MAX_VALUE = 10;
    var inputValueIsBad = function(inputValue) {
        var str = inputValue;
            var n = str.length;
        return parseInt(n);

    }
    
    skuid.utils.delayInputCallback(input,function(newValue,oldValue){
        var val = input.val();
       if (inputValueIsBad(input.val())) {
           var inptText =input.val() ;
           var lengthText = inptText.length;

           // Add an error
           if(lengthText<=255){
            var remainingCharacter = 255 - lengthText ;
            addFieldError('Remaining Characters are '+remainingCharacter);
           }
           if(lengthText>255)
           addFieldError('You have entered more then '+'255'+' characters.  You must remove ' + (lengthText - 255) + ' character(s) in order to avoid an error on SAVE.');

           // And revert the value

       }  else {
           if (errorMessageBox) errorMessageBox.hide();
           field.element.removeClass('my-required-field');
       }
    });
}

************************************************************************
NOTE: our snippet is hard coded to 255 chars, because that's what our field was.  It would be super cool for the snippet to read the max char length (set on the SF object) and use that instead.  I imagine this snippet could be used on more fields on the page this way.

CSS resource (called taskCommentsUI):
************************************************************************
.field-error-messages {       color: red;    padding: 2px;
}
.my-required-field textarea, .my-required-field input  {
    border: 1px solid #D00;
    border-right: 4px solid #D00;
}
************************************************************************
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Thanks!
Photo of Curtis Ellingham

Curtis Ellingham

  • 362 Points 250 badge 2x thumb
Having trouble getting this to work, could it be because my field is rich text, and if so is there a way to make this work for rich text fields?
(Edited)