• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Start each word with a capital letter in textbox

Start each word with a capital letter in textbox 7 months 2 weeks ago #42979

  • khnoiel
  • khnoiel's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 7
I have this code in textbox in Additional Attributes
onkeyup="this.value=( this.value.charAt(0).toUpperCase()+this.value.substring(1).toLowerCase());"

This code only has the first word capitalized at the beginning.
e.g. This is an example

I need every word with capitalized at beginning.
e.g. This Is An Example

Has anyone a solution for me?
The administrator has disabled public write access.

Start each word with a capital letter in textbox 7 months 2 weeks ago #42990

  • iceferret
  • iceferret's Avatar
  • OFFLINE
  • Gold Boarder
  • Posts: 216
  • Thank you received: 57
It's neater as a function that can be called by any field in a form so try this
function capitalizeInput(inputField) {
  const inputValue = inputField.value;
  const words = inputValue.split(' ');
  const capitalizedWords = words.map(function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
  });
  inputField.value = capitalizedWords.join(' ');
}

call it with
onkeyup="capitalizeInput(this);"
If you can keep your head when all about you are losing theirs, then you obviously don't understand the situation!
The administrator has disabled public write access.
The following user(s) said Thank You: khnoiel

Start each word with a capital letter in textbox 7 months 2 weeks ago #42991

  • khnoiel
  • khnoiel's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 7
@iceferret
Thank you very much - works perfectly
The administrator has disabled public write access.

Start each word with a capital letter in textbox 7 months 2 weeks ago #42992

  • iceferret
  • iceferret's Avatar
  • OFFLINE
  • Gold Boarder
  • Posts: 216
  • Thank you received: 57
It's important to bear in mind that it cant handle hyphenate things like double barrelled names such as Hawkins-Smith, the second part will be lower case and names like O'Keefe will also throw it.
If you can keep your head when all about you are losing theirs, then you obviously don't understand the situation!
The administrator has disabled public write access.
The following user(s) said Thank You: gregs, khnoiel

Start each word with a capital letter in textbox 7 months 2 weeks ago #42993

  • khnoiel
  • khnoiel's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 7
found a solution with hyphen
<script type="text/javascript">
 
  document.addEventListener('DOMContentLoaded', function() {
    var textField = document.getElementById('yourTextFieldId'); // Ersetzen Sie 'yourTextFieldId' durch die ID Ihres Textfelds
    textField.addEventListener('blur', function() {
      var words = textField.value.split(' ');
      for (var i = 0; i < words.length; i++) {
        var word = words[i];
        // Überprüfen Sie, ob das Wort einen Bindestrich enthält
        if (word.indexOf('-') !== -1) {
          var parts = word.split('-');
          for (var j = 0; j < parts.length; j++) {
            parts[j] = parts[j].charAt(0).toUpperCase() + parts[j].slice(1);
          }
          words[i] = parts.join('-');
        } else {
          words[i] = word.charAt(0).toUpperCase() + word.slice(1);
        }
      }
      textField.value = words.join(' ');
    });
  });
 
</script>
Last Edit: 7 months 2 weeks ago by khnoiel.
The administrator has disabled public write access.

Start each word with a capital letter in textbox 7 months 2 weeks ago #42994

  • iceferret
  • iceferret's Avatar
  • OFFLINE
  • Gold Boarder
  • Posts: 216
  • Thank you received: 57
For surnames I use a chunk of PhP code called on form process but if you convert it to a Javascript function it will work on name fields including those with hyphens, in two parts, here's the main function that does the capitalisation
function titleCase(inputString) {
  const wordSplitters = [' ', '-', "O'", "L'", "D'", 'St.', 'Mc', 'Mac'];
  const lowercaseExceptions = ['the', 'van', 'den', 'von', 'und', 'der', 'de', 'da', 'of', 'and', "l'", "d'"];
  const uppercaseExceptions = ['III', 'IV', 'VI', 'VII', 'VIII', 'IX'];
 
  let string = inputString.toLowerCase();
  wordSplitters.forEach(function (delimiter) {
    const words = string.split(delimiter);
    const newWords = [];
 
    words.forEach(function (word) {
      if (uppercaseExceptions.includes(word.toUpperCase())) {
        word = word.toUpperCase();
      } else if (!lowercaseExceptions.includes(word)) {
        word = word.charAt(0).toUpperCase() + word.slice(1);
      }
 
      newWords.push(word);
    });
 
    if (lowercaseExceptions.includes(delimiter.toLowerCase())) {
      delimiter = delimiter.toLowerCase();
    }
 
    string = newWords.join(delimiter);
  });
 
  return string;
}

part two:
function capitalizeSurname(inputField) {
  const inputValue = inputField.value;
  const capitalizedValue = titleCase(inputValue);
  inputField.value = capitalizedValue;
}

called in the form fields attributes with:
onblur="capitalizeSurname(this);"

...and an explanation.
The onblur attribute of my input field "surname" is set to capitalizeSurname(this), when the user leaves the "surname" field (on blur), the capitalizeSurname function is called, passing the input field (this) as an argument.

Inside the capitalizeSurname function, I get the original value of the "surname" field using inputField.value, then capitalize it using the titleCase function, and finally, set the input field's value to the capitalized value.

So, when a user enters or edits a surname in the "surname" field and then leaves the field, it will automatically be capitalized correctly using the titleCase function.
If you can keep your head when all about you are losing theirs, then you obviously don't understand the situation!
Last Edit: 7 months 2 weeks ago by iceferret.
The administrator has disabled public write access.
The following user(s) said Thank You: khnoiel
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!