Textarea character counter honor site language.

Hello,

So after implementing a limitation on my textarea to prevent more than 1000 characters, the only issue i still have is the languages of the counter text.

At present, it shows 1000 characters left on both languages. How do I make it so that I can set the language of that text to the language of the site?

Thanks
Brett

Hi Brett,

Please try this as a JavaScript solution, or you could change the JavaScript before loading using PHP in a similar way:

jQuery(document).ready(function (jQ) {
  var userLang, text;
  userLang = navigator.language || navigator.userLanguage;
  switch ( userLang ) {
    case 'en-GB':
    default:
      text = 'You have typed %length characters of %maxlength, <span style=\'color: red; font-weight:bold;\'>%left</span> remain.';
    break;
    case 'af-AF':
    text = 'Jy het karakters %length van %maxlength getik, <span style=\'color: red; font-weight:bold;\'>%left</span> bly.';
    break;
  }
  jQ( '#textarea1' ).maxlength({
    text: text
  });
});

!! not tested and may need debugging !!

Bob

That didnt work unfortunately. I have PM'd you the username and password for you to take a look if you dont mind🙂

Hi Brett,

Please try replacing textarea 1 with the ID of your textarea

jQ( '#Message' ).maxlength({

Bob

Thanks for this but still no go.

I modified it to have simpler text but still not working. I played around with the language locale ids but also no go.

jQuery(document).ready(function (jQ) {
  var userLang, text;
  userLang = navigator.language || navigator.userLanguage;
  switch ( userLang ) {
    case 'en':
    default:
      text = '%left characters left.';
    break;
    case 'af':
    text = '%left karakters oor.';
    break;
  }
  jQ( '#Message' ).maxlength({
    text: text
  });
});

Different Locale

jQuery(document).ready(function (jQ) {
  var userLang, text;
  userLang = navigator.language || navigator.userLanguage;
  switch ( userLang ) {
    case 'en-GB':
    default:
      text = '%left characters left.';
    break;
    case 'af-ZA':
    text = '%left karakters oor.';
    break;
  }
  jQ( '#Message' ).maxlength({
    text: text
  });
});

Hi Brett,

I have this working now using PHP to detect the site language:

<?php
$lang = \JFactory::getLanguage();
$tag = $lang->getTag();
switch ( $tag ) {
  case 'en-GB':
  default:
   $text = '%left characters left.';
   break;
  case 'af-ZA':
   $text = '%left karakters oor.';
   break;
}
?>
jQuery(document).ready(function (jQ) {
  jQ( '#Message' ).maxlength({
    text: '<?php echo $text; ?>'
  });
});

Bob

PS The previous code did work - more or less - it was detecting the browser language though, not the site language (and I found that FireFox uses 'af' and 'en' and Chrome used 'af-ZA' and 'en-US')

Brilliant!🙂 You're a legend! thanks a lot....all good now.