Textareas with Max. Min. Chars Counter

1.

<!-- This site runs with u5CMS version 12.4.3 from https://yuba.ch/u5cms -->

2.
Create a page in the u5CMS-backend named maxchar
The page must have EXACTLY this content:

  
[h:]
<script>

themax=2500;
themin=500;

</script>

<!-- DO NOT CHANGE THINGS BELOW !!! -->

<input type="hidden" name="abstractlength_mandatory" />

<small>Characters left: <span id="imaxchar">
<script>document.write(themax);</script>
</span></small>

<script>
function putdoins(that) {
insertAtCursor(document.u5form.abstract_mandatory, that);
}

function insertAtCursor(myField, myValue) {
  //IE support
  myValue=unescape(myValue);
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
                  + myValue
                  + myField.value.substring(endPos, myField.value.length);
  } else {
    myField.value += myValue;
  }
    myField.focus(); 
	if (myField.setSelectionRange) myField.setSelectionRange(startPos + myValue.length, startPos + myValue.length);
}

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}


function maxchar() {
if (document.u5form.abstract_mandatory) {
var currentPosition = document.u5form.abstract_mandatory.selectionStart;
if (document.u5form.abstract_mandatory.value!=netchar(document.u5form.abstract_mandatory.value)) {
document.u5form.abstract_mandatory.value=netchar(document.u5form.abstract_mandatory.value);
setSelectionRange(document.u5form.abstract_mandatory, currentPosition-1, currentPosition-1);
}

charsleft=themax-document.u5form.abstract_mandatory.value.length;

if (charsleft<0) {
document.getElementById('imaxchar').innerHTML=charsleft+' <span style="color:red;background:yellow">too long! (max.'+themax+')</span>';
document.u5form.abstractlength_mandatory.value='';
}

else if (charsleft<themax && charsleft>themax-themin) {
document.getElementById('imaxchar').innerHTML=charsleft+' <span style="color:red;background:yellow">too short! (min.'+themin+')</span>';
document.u5form.abstractlength_mandatory.value='';
}

else {
document.getElementById('imaxchar').innerHTML=charsleft+'</span>';
if (charsleft<themax) document.getElementById('imaxchar').innerHTML=charsleft+' <span style="color:green;background:white">length ok!</span>';
document.u5form.abstractlength_mandatory.value='ok';
}
}

setTimeout("maxchar()",111);
}
setTimeout("maxchar()",111);

function netchar(brutto) {
brutto=brutto.replace(/\n\r\n\r\n\r/g,'\n\r\n\r');
brutto=brutto.replace(/\r\n\r\n\r\n/g,'\r\n\r\n');
brutto=brutto.replace(/\n\n\n/g,'\n\n');
brutto=brutto.replace(/\r\r\r/g,'\r\r');
//brutto=brutto.replace(/\t/g,' ');
brutto=brutto.replace(/\r /g,'\r');
brutto=brutto.replace(/\n /g,'\n');
brutto=brutto.replace(/  /g,' ');
return brutto;
}
</script>
              
              
<small>
<a href="javascript:void(0)" onclick="fandc()">formatting & special characters</a>
</small>
<script>
function fandc() {
fandctext='FORMATTING: not allowed.\n\nSPECIAL CHARS: all allowed. Confirm this message to insert special chars.';
cf=confirm(fandctext);
if(cf) window.open('characters','_blank','toolbar=0,location=0,status=1,menubar=0,scrollbars=1,resizable=1,width=1200,height=1000');

}
</script> 
[:h]

3. Create a page in the u5CMS-backend containing a form with this code:

  
[h:]
<p>
Abstract*[$$$:maxchar]<br>
<textarea rows="22" name="abstract_mandatory"></textarea>
<p>
[:h]

If you want something different instead of name="abstract_mandatory" you have to adjust maxchar accordingly.

Example Result

Download

Service

English⇄German Translation Service

Flowers

blumen-bern-maarsen.ch