Mistalis Mistalis - 11 months ago 79
CSS Question

Capitalize fields in a form

I want to capitalize/uppercase some fields in a HTML form.


<form role="form" ng-submit="submit()">
<input type="text" class="capitalize" id="firstname" ng-model="first"/>
<input type="text" class="uppercase" id="lastname" ng-model="last"/>
<button type="submit"></button><


.uppercase {
text-transform: uppercase;

.capitalize {
text-transform: capitalize;

When I enter data on the fields it works well, but when
is submitted, capitalization is not preserved.

I use an Angular controller/service to send data to my server. Should I edit data on my controller, or could I keep the CSS capitalization ?

Thanks! :)

Answer Source

Here is a solution. Add to your controller those 2 new functions:

 * Capitalize the first letter of the passed string
 * @param String to be upper cased 
function upperCase(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);

 * Capitalize the whole string passed
 * @param String to be capitalize
function capitalize(string) {
    return string.toUpperCase();    

In $scope.submit(), You can transform the firstname/lastname as follow:

$scope.submit = function() {
    $scope.firstname = upperCase($scope.firstname);    
    $scope.lastname = capitalize($scope.lastname);