Textareas with Max. Min. Chars Counter

This paragraph explains how to create a textarea forcing a minimum and a maximum of characters and presenting a link to insert special characters.

1.

Is your u5CMS installation up-to-date and ready for this functionality?
×

For the functionality described on the page at hand, make sure you are using a current u5CMS version. You'll find the version number by surfing to your website and switching your browser to show the HTML source code. At the very bottom of the source code you'll find a line like this:
<!-- This site runs with u5CMS version 12.4.3 from https://yuba.ch/u5cms -->
If there is no such line or no version number or one lower than V8.3.3, see the following instructions:

u5CMS — How to update an existing installation (version 4 and above)
×
These update instructions are for u5CMS versions 4 and above. For versions below 4 read this!

  1. On your server, go to the files of your old (current) u5CMS installation and copy config.php to config.old.php
  2. Download the ZIP-File , unzip it and delete the file favicon.ico
  3. Further, delete all contents in folder r EXCEPT runonce.php
  4. Transfer the remaining files and folders from the ZIP file over the existing installation (FTP upload)
  5. Now, on your server, copy the database connection parameters $host $username $password $db from config.old.php to config.php
    If there are other dedicated settings in config.old.php, set the same in config.php (compare parameter by parameter)
  6. You must now log in to the backend of your (now updated) u5CMS installation via https://urltoyouru5cmsfrontend/u5admin and open a css-object (e. g. csslayout) in PIDVESA
    ×
    PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen.
    PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
    's S code section, for your site to work correctly again.
  7. You must now log in to the backend of your (now updated) u5CMS installation via https://urltoyouru5cmsfrontend/u5admin for that the database will be updated too

TROUBLE SHOOTING
A) If the layout does not look right after having done step 7, go to https://urltoyouru5cmsfrontend/u5admin and open a css-object (e. g. csslayout) in PIDVESA
×
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen.
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
's S special function's code (htmltemplate & css) section and safe it!
B) If your navigation does not look well, copy this code to cssnavleft in PIDVESA
×
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen.
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
's→S→Code and this code to cssnavleftsubtop in PIDVESA
×
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen.
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
's→S→Code and this code to cssnavtop in PIDVESA
×
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen.
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
's→S→Code

C) If after A) and B) the layout still does not look right, change the doctype <!DOCTYPE html> to the old one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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


Your data

Abstract* Characters left: formatting & special characters



Code of the Example Result
×

[fo:]
[fi:]
[le:]Your data[:le]
[h:]
<!--Hidden fields in your form. You should have them in your form!-->
<input type="hidden" name="ouremail" value="enter@youremailaddress.here" />
<input type="hidden" name="thanks" value="thanks" />
<input type="hidden" name="thankssubject" value="Thank you for your message!" />
<input type="hidden" name="thankstext" value="Thanks your message! Please find it quoted below:" />
<input type="hidden" name="thanksgreetings" value="Yours faithfully, John" />
<!--Visible fields in your form displayed to the form user-->
<label>Business*</label>
<select name="business_mandatory">
<option value="">please select</option>
<option value="education">Education</option>
<option value="engineering">Engineering</option>
<option value="medical">Medical</option>
<option value="other">other</option>
</select>
<label>Name*</label><input size="77" type="text" name="name_mandatory" />
<label>Firstname</label><input size="77" type="text" name="firstname" />
<label >E-Mail*</label><input size="77" type="text" name="youremail_mandatory" />
[h:]
<p>
Abstract*[$$$:maxchar]<br>
<textarea rows="22" name="abstract_mandatory"></textarea>
<p>
<label >How much is hundred minus one (enter digits)? [whythis]</label><input size="77" type="text" name="cliving_mandatory" />
<label>&nbsp;</label><input type="submit" value="send" />
[:h]
[:fi]
[:fo]


A note to the careful reader
×

Usually u5CMS-commands – e. g. [b]bold text[/] – must be outside HTML-sections:

Here u5CMS-code like [b]bold text[/] is possible
[h:]
Here you are inside an HTML-section, therefore [b]bold text[/] does not
work but <strong>bold text</strong> (or old style: <b>bold text</b>).
[:h]
Here we are outside the HTML-section again.

The command for inclusions [$$$:nameofthepagetoinclude] – e. g. [$$$:datepicker] – and the command for formdata queries [fieldname|formname:dat] and references to objects – e. g. [imagename] – and further superglobals are useful exceptions, they do work outside and inside HTML-sections.

That's why you can simply type [$$$:datepicker] within an HTML-section, instead of stopping the HTML-section first, entering the u5CMS-command for an inclusion then, and restarting the HTML-section afterwards (what would look like this: [:h][$$$:datepicker][h:]).

Download

Content Management System u5CMS

Service

English⇄German Translation Service

Flowers

blumen-bern-maarsen.ch