Character Counter for text fields that are not journal or multi line

[abrahams]

We have been having an issue with users typing too many characters in short description within incident causing their text is be truncated.   Does anyone know of a way to let the user know that they have reached the character limit?   I see there is a UI Property setting that allows you to place a counter for Journal and Multi Line text fields.   I see that this doesn't count shorter text fields.   Any suggestion would be appreciated.

[Pradeep Sharma]

Hi Sue,

Please check the section 5 in the below wiki link.

Using Journal Fields - ServiceNow Wiki

Character Counter for text fields that are not journal or multi line

[abrahams]

As stated I already looked at that.   It only applies to Journal and Multi Line fields.   I need to have something similar for smaller text fields.   I don't want to shrink what the user can see for larger text fields.   Thank you for your suggestion.

[Mike Allen]

Let me share with you what I did.   I had a similar requirement, but mine was multiple fields on the Problem form (description, short_description, etc.):

onSubmit Client Script with AJAX call

I am call AJAX to return the JSON doc.   I am then separating the doc into an array with split(',').   Then I am separating each resulting element and passing it into the client script language:

function onSubmit() {
   //Type appropriate comment here, and begin script below
   var fields = ['description','situation_appraisal','short_description'];
   var table = g_form.getTableName();
   var getFieldsAjax = new GlideAjax('getFieldLengths');
   getFieldsAjax.addParam('sysparm_name', 'getFieldLengths');
   getFieldsAjax.addParam('sysparm_fields', fields);
   getFieldsAjax.addParam('sysparm_table', table);
   getFieldsAjax.getXMLWait();

   var field = getFieldsAjax.getAnswer().split(',');
   var fieldsLength = field.length;
   var count = 0;
   for(i=0;i<fieldsLength;i++){
           var check = field[i].split('|');
           var length = g_form.getValue(check[0]).length;
           if(length > check[1]){
                   g_form.showErrorBox(check[0], 'Field Length (' + length + ') exceeds maximum of ' + check[1] + '.');
                   count++;
           }
   }
   if(count>0){
           return false;
   }
}

Script Include for AJAX:

In this, I am creating a JSON doc that sends my field and my field max length.

var getFieldLengths = Class.create();
getFieldLengths.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
   getFieldLengths: function(){
           var answer = '';

           var dict = new GlideRecord('sys_dictionary');
           dict.addQuery('name', 'task').addOrCondition('name', this.getParameter('sysparm_table'));
           dict.addQuery('element', 'IN', this.getParameter('sysparm_fields'));
           dict.query();
           while(dict.next()){
                   answer += dict.element + '|' + dict.max_length + ',';
           }
           return answer;
   }
});

[jatinkohli]

We recently had this issue and found a way around. Courtesy are SA

You can achieve this by using DOM Element. Add a 'EventListner' on the field, which will watch this field for changes/events and then we trigger a function. In your case, you can watch for the 'keyup' event and every time this event occurs, count the characters. A key up event is triggered after a key is pressed on the keyboard inside the chosen DOM element. So, if keep we keep this count and if the count becomes greater than 160, we could alert the user that the SMS field accepts 160 characters only.

Dev:

In an 'onLoad' client script on the page with the SMS field, enter the following code. Replace the characters in red with the element id of the SMS field.

function onLoad() {

    document.getElementById("incident.short_description").addEventListener("keyup", keyUpTextField, false);

}

function keyUpTextField (e) {

                              var value = (document.getElementById("incident.short_description").value);

                              alert (value.length);

}

After this is done, every time you type something in the SMS field, you should get an alert with the length of the characters in that field.

More To Do:

1. Check cross browser compatibility
2. Some key presses need to be ignored (tab, control, alt, enter, etc.). To ignore these, use the keycode of the keys pressed and ignore them in an if/else condition. To get the key-code in code, use this example inside the keUpTextField function. All Key Codes are here: https://css-tricks.com/snippets/javascript/javascript-keycodes/ :

var keyCode = e.keyCode;

if(keyCode==13) { //KEY CODE FOR ENTER IS 13

alert("You hit the enter key.");

}

else{

alert("You hit some other key.");

}

Hope this helps, if yes, please mark it so.