Support Article

Counter control displays incorrect count

SA-16530

Summary



The character limit counter on a text area does not increment the counter correctly for the newline characters in Chrome.


Error Messages



Not Applicable


Steps to Reproduce



1. In a text area, enter text on a single line and continue to the next. The counter works fine.
2. Enter text in multiple lines. It stops at a certain point even though there are more characters to be read.


Root Cause



The text area control uses browser-based code to determine behavior. In Chrome, the newline character is considered as two characters. The Pega text area character counter considers the newline character to be a single character. Thus, for every newline character used, Chrome will show an extra character available after the browser ceases to allow further input into the text area.

Resolution



Update the UserWorkForm with the following code to ensure Pega correctly counts the newline character as two characters in appropriate browsers:

<script>
$(document).ready(function() {
if(pega && pega.control && pega.control.ITextArea &&
pega.control.ITextArea.prototype &&
pega.control.ITextArea.prototype.updateTextAndCounter){
pega.control.ITextArea.prototype.updateTextAndCounter = function(eventEle)
{
if(eventEle.nodeName.toUpperCase() == "TEXTAREA") {
var charMaxValue = eventEle.getAttribute("maxLength");
var tempValue = "";
var extraCount = 0;
/* BUG-89515:In IE quirks mode new line is interpreted as \r\n */
if(!("maxLength" in document.createElement("TEXTAREA"))){
tempValue = eventEle.value.replace(/\r/g,"");
}else{
tempValue = eventEle.value;
if(navigator.userAgent.lastIndexOf('Chrome/') > -1){
extraCount = tempValue.split("\n").length-1;
}
}
var tempValueLength = tempValue.length + extraCount ;
if(charMaxValue){
charMaxValue = parseInt(charMaxValue);
if(tempValueLength > charMaxValue) {
/* If eventEle.value > tempValue.length substring should consider the
difeerence in length */
/* BUG-205290: Fixed issue with remaining characters in IE */
if (eventEle.value.length > tempValueLength) {
eventEle.value = eventEle.value.substring(0,charMaxValue +
(eventEle.value.length - tempValueLength));
} else {
eventEle.value = eventEle.value.substring(0,charMaxValue);
}
this.valueReset = true;
}
}
if(eventEle.getAttribute("updateCounter") == "true") {
var counterSpan = document.getElementById(eventEle.name+"_counter");
if(counterSpan){
counterSpan.innerHTML = ((charMaxValue - tempValueLength)<0 ? 0
:(charMaxValue - tempValueLength))+"";
}
}
}
};
}
});
</script>

 

Suggest Edit

Published January 31, 2016 - Updated October 8, 2020

Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.