Character Counter text-field

[andresundal2]

Hello!

We have made a function in our servicenow instance that allows us to send SMS-messages to people directly from servicenow.
And now we would like to add a Character Counter underneath the text-field. Showing how many characters you have put in, and how many you got left before the message is split up in two texts/SMS's. Using an UI-Script to do this.

Been googling around a bit but i couldn't find a answer for it sadly. I found some guides/howto for adding this to Additional comments, but not to a self-made field.

Does anyone here have any tips or tricks? Bare in mind that im no expert in Java-scripting.

[andresundal2]

Added a picture of an example. Its something like that were after.

[andresundal2]

Found a code that works. But the countdown of characters remaining is not working.
Could it be the first two lines that makes or breaks this?

These two:

var counterBreak=document.createElement('br');

var counter=document.createElement('input');

function onLoad() {

//Create the counter field and line break

var counterBreak=document.createElement('br');

var counter=document.createElement('input');

counter.id='counter';

counter.type='text';

counter.readOnly=true;

counter.size='4';

counter.maxlength='4';

counter.value='500';

//Create a text node to be a label for the counter

var counterLabel = document.createElement('text');

counterLabel.innerHTML=' characters left';

//Use the 'onkeyup' event to check the 'isMaxLength' function

//Get the control

var control = g_form.getControl('u_message_sms');

//Add the nodes to the form

var controlParent = control.parentNode;

controlParent.appendChild(counterBreak);

controlParent.appendChild(counter);

controlParent.appendChild(counterLabel);

//Set its onkeyup method

control.onkeyup = isMaxLength;

}

function isMaxLength() {

    var mLength=500;

    var control = g_form.getControl('u_message_sms');

    var countControl = gel('u_message_sms');

    if (control.value.length >= mLength){

          //If number of characters exceeds maxLength then trim the value

          control.value = control.value.substring(0, mLength);

          //Flash the label for the comments field red for 4 seconds and change field background color

          g_form.flash('new_call.u_message_sms', '#FF0000', -4);

          g_form.getControl('u_message_sms').style.backgroundColor='red';

    }

    // otherwise, update 'characters left' counter

    else{

          //Change the background color of the field depending on characters left

          if(control.value.length <= 200){

                g_form.getControl('u_message_sms').style.backgroundColor='';

          }

          if((control.value.length > 200) && (control.value.length <= 400)){

                g_form.getControl('u_message_sms').style.backgroundColor='yellow';

          }

          if(control.value.length > 400){

                g_form.getControl('u_message_sms').style.backgroundColor='orange';

          }

    }

    countControl.value = mLength - control.value.length;

}

[andresundal2]

We got it to work! You can just close down this thread.

[reginabautista]

Hi Andre could you share how you have resolved this please. I would like to implement same feature in one of the applications I am working on. Thanks.