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? — holydragon
– holydragon, Commented Mar 21, 2019 at 1: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
– NullEins, Commented Mar 21, 2019 at 1: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
– holydragon, Commented Mar 21, 2019 at 1:55

Sajeetharan · Accepted Answer · 2019-03-21 01:44:16Z

1

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>

answered Mar 21, 2019 at 1:44

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NullEins Over a year ago

I need title case no uppercase

Snow · Accepted Answer · 2019-03-21 01:41:08Z

0

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>

answered Mar 21, 2019 at 1:41

Snow

4,1463 gold badges16 silver badges43 bronze badges

2 Comments

NullEins Over a year ago

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.

Snow Over a year ago

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

Collectives™ on Stack Overflow

AngularJS: Convert input text to tittle case while typing

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related