2

I have multiple input fields that obtain a city. I would like while the user is imputing the city name that the first letter of each word to auto capitalize, while the rest of the letters are forced lower case.

NOTE: Because of my requirements, the CSS text-transform property won't work because it only modifies the first letter of the words - - if the user types capital letters beyond the first letter, that won't adjust it.

So far i have this JavaScript: 

function forceLower(strInput) {
  strInput.value=strInput.value.toLowerCase();
}

Which is successfully converting the entire input to lowercase.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Charles L.
  • 1,844
  • 2
  • 34
  • 56

2 Answers2

6

See comments inline for details:

// Get a reference to the input and wire it up to an input event handler that
// calls the fixer function
document.getElementById("txtTest").addEventListener("input", forceLower);

// Event handling functions are automatically passed a reference to the
// event that triggered them as the first argument (evt)
function forceLower(evt) {
  // Get an array of all the words (in all lower case)
  var words = evt.target.value.toLowerCase().split(/\s+/g);
  
  // Loop through the array and replace the first letter with a cap
  var newWords = words.map(function(element){   
    // As long as we're not dealing with an empty array element, return the first letter
    // of the word, converted to upper case and add the rest of the letters from this word.
    // Return the final word to a new array
    return element !== "" ?  element[0].toUpperCase() + element.substr(1, element.length) : "";
  });
  
 // Replace the original value with the updated array of capitalized words.
 evt.target.value = newWords.join(" "); 
}
<input type="text" id="txtTest">
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 2
    GREAT JOB @Scott Marcus, Great details and works perfectly. Great job – Charles L. Dec 08 '16 at 20:54
  • This latest iteration is throwing the error `Uncaught TypeError: Cannot read property 'addEventListener' of null` – Charles L. Dec 08 '16 at 21:06
  • its throwing on page load – Charles L. Dec 08 '16 at 21:12
  • 1
    @Charles You've probably added this code BEFORE the rest of the DOM was loaded. Put your script at the BOTTOM of the page, just before the `

    ` tag.

     – Scott Marcus Dec 08 '16 at 21:14
  • 2
    @MattiaPontonio Please do not ever edit someone else's answer because you want to show the code in a more/less optimized way. I take great care in the way I structure my answers and which code I choose to show for the solution. Yes, the solution could be optimized, but generally people asking these kinds of simple questions need more easily understandable answers, not optimized code. And, of course, any good programmer knows that you solve the problem first and optimized the code later. If you'd like to show optimized code, add your own answer. – Scott Marcus Apr 15 '19 at 00:32
  • @ScottMarcus Is there a way to add exceptions to this code, so that words like "of" or "and" don't be capitalized? – winiercape Feb 25 '21 at 22:59
4

you can use css for this text-transform: capitalize

function firstCap(str){
  var returnVar='';
  var strSplit=str.split(' ');
 for(var i=0;i<strSplit.length;i++){
 returnVar=returnVar+strSplit[i].substring(0,1).toUpperCase()+strSplit[i].substring(1).toLowerCase() +' ';
  }
return returnVar
}
div , input {text-transform: capitalize;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> this is only the first lettter</div>
<input type="text"/>
Ishey4
  • 327
  • 3
  • 13