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>