AngularJS: Convert input text to tittle case while typing

Question

I'm trying to do what I think it's a pretty simple thing but I'm having problems to make it work.

I have a form with some input fields that need to be transformed to title case (the first letter of each word need to be uppercase) while typing.

I found a function to do it, but it doesn't seem to work on the input field.

I also had found some fancy scripts like http://individed.com/code/to-title-case/ but there so much that I don't really need.

I'm using AngulasJS if that really matters.

function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }

<div class="form">
    <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
   <label for="username"><span class="required">*</span>Username:</label>
   <input id="username" type="text" name="username" autofocus onchange="form.output.value=toTitleCase(this.value)" onkeyup="form.output.value=toTitleCase(this.value)">
   <input class="login" type="submit" value="Save">
   </form>
</div>

Possible duplicate of [How to autocapitalize the first character in an input field in AngularJS?](https://stackoverflow.com/questions/15242592/how-to-autocapitalize-the-first-character-in-an-input-field-in-angularjs) — holydragon, Mar 21 '19 at 01:41
I see that question while looking for a solution for my problem. The thing is that in the accepted answer only the first letter of the whole string gets uppercase, and I need it to be the first character of each word on the input — NullEins, Mar 21 '19 at 01:53
You can edit that particular part to split the whole string by space to get all the words and just capitalize every word you got. — holydragon, Mar 21 '19 at 01:55

score 1 · Answer 1 · answered Mar 21 '19 at 01:44

Fist of all with angularjs , you should use ng-change instead of onchange, similarly for other events as well. You could simply handle with the following way

DEMO

var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
});

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="HelloWorldCtrl">
     <input ng-model="some" ng-change="some = (some | uppercase)"  />
  </body>
</html>

I need title case no uppercase – NullEins Mar 21 '19 at 01:50 — NullEins, Mar 21 '19 at 01:50

score 0 · Answer 2 · answered Mar 21 '19 at 01:41

The input field has an id of username, not output, so

onchange="form.output.value=

fails. Change references to output to references to username:

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus onchange="form.username.value=toTitleCase(this.value)" onkeyup="form.username.value=toTitleCase(this.value)">
    <input class="login" type="submit" value="Save">
  </form>
</div>

Even better, use a proper event listener:

const input = document.querySelector('#username');
const handler = () => {
  input.value = toTitleCase(input.value);
};
input.onchange = handler;
input.onkeyup = handler;

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus>
    <input class="login" type="submit" value="Save">
  </form>
</div>

The event listener solution seems like a much better approach. So I put (and adapt) the JS code to my controller but the console it's showing: "Error: input is null" at the line: " input.onchange = handler;". I'll check it tomorrow with a fresh head. — NullEins, Mar 21 '19 at 02:08
Sounds like you didn't select the element properly, or it doesn't exist in the DOM at the time you try to select it — Snow, Mar 21 '19 at 02:41

AngularJS: Convert input text to tittle case while typing

2 Answers2